cardbuddy 0.7.0 → 0.9.0

package/dist/vendored/components/DebugPanel.vue

@@ -13,8 +13,8 @@
   RadioButton·CheckGroup 选择 / globalSet 等只写这里），不污染 rootScope、不触发保存
   高亮，事件代码里 `this.data.xxx` 也读这里，调试变更永不落盘。
 
-  注：「绑定错误」已移至底部状态栏（类 VSCode 面板），点击状态栏问题指示器在
-  底部弹出错误面板查看，不再作为此处的标签页。
+  注：「变量绑定」已移至底部状态栏（类 VSCode 面板），点击状态栏指示器在
+  底部弹出面板查看，不再作为此处的标签页。
 -->
 <template>
   <aside class="debug">
@@ -43,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>
@@ -54,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>
@@ -70,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>
@@ -130,16 +147,18 @@
       节点属性面板：组件结构 tab 双击节点弹出（可编辑写回）。
       事件编辑已并入本面板的「事件」页签（meta 驱动），不再有独立弹层。
     -->
-    <NodeInspector
-      v-if="inspectingComp"
-      :key="inspectKey"
-      :comp="inspectingComp"
-      :comp-names="compNames"
-      :rt="rt"
-      @apply="onApply"
-      @commit="onCommit"
-      @close="inspectingComp = null"
-    />
+    <Transition name="modal">
+      <NodeInspector
+        v-if="inspectingComp"
+        :key="inspectKey"
+        :comp="inspectingComp"
+        :comp-names="compNames"
+        :rt="rt"
+        @apply="onApply"
+        @commit="onCommit"
+        @close="inspectingComp = null"
+      />
+    </Transition>
 
    <!--
      事件编辑弹框：点击结构树「事件」徽标时单独弹出，与属性面板解耦。
@@ -164,26 +183,38 @@
       并持久化到 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>
 
     <!--
       底部状态栏：Teleport 到 App 的 #app-workside-bar，作为「调试面板 + 接口调用面板」
       中右两栏共同的底栏（贴近 VSCode 布局）。defer：目标与 Teleport 同属本应用组件树，
       挂载时目标尚未插入 document，须等整个应用挂载完成后再解析（Vue 3.5+）。
       chrome-off 截图模式下禁用 Teleport，回落到本面板内渲染（随面板一起隐藏）。
-      左侧「问题」指示器展示绑定错误数，点击弹出/收起错误面板；右侧展示当前卡片与卡片总数。
+      左侧三枚指示器（运行态 / 变量绑定 / 事件）点击弹出或收起对应底部面板；右侧展示当前卡片与卡片总数。
     -->
     <Teleport defer to="#app-workside-bar" :disabled="chromeOff">
       <section class="statusbar">
@@ -201,7 +232,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>
@@ -211,34 +242,63 @@
         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>
-        <span>{{ eventCount ? eventCount + ' 条事件' : '无事件' }}</span>
+        <span>{{ eventCount ? eventCount + ' 条事件记录' : '无事件记录' }}</span>
       </button>
-      <!-- 本地开发服务连接状态：连接图标 + 状态文案，颜色与右上角「连接」按钮实时同步（复用 devSvcClass / devSvcTitle / devSvcLabel） -->
-      <span
+      <!-- 本地开发服务连接状态：连接图标 + 状态文案，颜色与右上角「连接」按钮实时同步（复用 devSvcClass / devSvcTitle / devSvcLabel）。
+           可点击：弹出 / 收起底部「服务日志」面板（实时镜像所连 cardbuddy 终端输出），展开态用 is-open 底线标识。 -->
+      <button
         class="statusbar__item statusbar__conn"
-        :class="devSvcClass"
-        :title="devSvcTitle"
+        :class="[devSvcClass, { 'is-open': errorPanel === 'svclog' }]"
+        type="button"
+        :title="devSvcTitle + '（点击查看服务日志）'"
+        @click="toggleErrorPanel('svclog')"
       >
         <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>
+      </button>
         <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">
-        <span class="errpanel__title">{{ errorPanel === 'event' ? '事件面板' : '绑定错误' }}</span>
+      <!-- 顶缘拖拽条：与竖向分隔条同规格（命中 6px / 高亮 3px），仅分割边缘触发 -->
+      <div class="panelhead__edge" :class="{ 'is-dragging': panelDragging }" title="拖拽调整面板高度" @mousedown.prevent="startResize"></div>
+      <div class="errpanel__head">
+        <span class="errpanel__title">{{ errorPanel === 'svclog' ? '服务日志' : errorPanel === 'event' ? '事件记录' : '绑定错误记录' }}</span>
+        <!-- 服务日志：标题后给一枚读数（行数 + 实时态），与事件面板 tab 同一位置语言 -->
+        <span v-if="errorPanel === 'svclog'" class="svclog__meta">
+          {{ svcLogs.length }} 行<span v-if="svcLogDropped"> · 已滚动淘汰 {{ svcLogDropped }}</span>
+          <i class="svclog__dot" :class="svcLogLive ? 'is-live' : 'is-off'"></i>{{ svcLogLive ? '实时' : '未连接' }}
+        </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"
@@ -246,47 +306,147 @@
             @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
+            v-if="errorPanel === 'svclog'"
+            class="errpanel__iconbtn"
+            :class="{ 'is-done': svcCopied }"
+            type="button"
+            :disabled="!svcLogs.length"
+            :title="svcCopied ? '已复制' : '复制全部日志（纯文本，去 ANSI）'"
+            @click="copySvcLogs"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
+          </button>
+          <button
+            v-if="errorPanel === 'svclog'"
+            class="errpanel__iconbtn svclog__follow"
+            :class="{ 'is-on': svcLogFollow }"
+            type="button"
+            :title="svcLogFollow ? '跟随最新输出（点击暂停）' : '已暂停跟随（点击回到最新）'"
+            @click="toggleSvcFollow"
+          >
+            <!-- 下箭头图标：跟随最新输出 -->
+            <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="12" y1="5" x2="12" y2="19" /><polyline points="19 12 12 19 5 12" /></svg>
+          </button>
+          <button
+            v-if="errorPanel === 'svclog'"
+            class="errpanel__iconbtn errpanel__clear"
+            type="button"
+            :disabled="!svcLogs.length"
+            title="清空面板（不影响服务端缓冲）"
+            @click="clearSvcLogs"
+          >
+            <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">
-        <!-- 事件面板：日志 + 错误 两区块，用于捕获主动日志与执行错误 -->
-        <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>
+      <div
+        class="errpanel__body"
+        :class="{ 'errpanel__body--term': errorPanel === 'svclog' && svcLogs.length }"
+        ref="errBody"
+        @scroll.passive="onErrBodyScroll"
+      >
+        <!-- 服务日志面板：本地服务（cardbuddy）终端输出的实时镜像。
+             服务端按行镜像 stdout/stderr 并保留原始 ANSI，这里经 preview/ansi.js 还原配色，
+             因此面板固定深色终端底（chalk 调色板取自深色令牌，浅底不可读）。 -->
+        <template v-if="errorPanel === 'svclog'">
+          <div v-if="!svcLogs.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">
+                <polyline points="4 17 10 11 4 5" />
+                <line x1="12" y1="19" x2="20" y2="19" />
+              </svg>
+            </span>
+            <p class="debug__empty">{{ svcEmptyText }}</p>
+            <p class="empty-state__hint">{{ svcEmptyHint }}</p>
+          </div>
+          <div v-else class="svclog">
+            <div
+              v-for="row in svcLogs"
+              :key="row.seq || row.t"
+              class="svclog__line"
+              :class="'svclog__line--' + row.level"
+            ><span class="svclog__text" v-html="row.html"></span></div>
+          </div>
         </template>
-        <!-- 绑定错误面板：仅错误列表 -->
+        <!-- 事件面板：按当前 tab 只渲染日志或错误一类 -->
+        <template v-else-if="errorPanel === 'event'">
+          <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>
 
@@ -305,7 +465,38 @@ import { nodeClipboard } from '@/runtime/clipboard-node.js'
 import { CodeJar } from 'codejar'
 import Prism from 'prismjs'
 import 'prismjs/components/prism-json'
-import { apiFetch } from '@/api.js'
+import { apiFetch, subscribeServiceLog, fetchServiceLogs } from '@/api.js'
+// 服务日志面板：终端 ANSI（SGR）→ HTML，1:1 还原 cardbuddy 的 chalk 配色
+import { ansiToHtml, stripAnsi } from '@/ansi.js'
+
+/** 服务日志在前端保留的最大行数（与服务端环形缓冲同量级，超出裁剪最旧的）。 */
+const SVC_MAX_LINES = 800
+
+/**
+ * 行级别判定：只认 logger.js 的行首标签（HH:MM:SS.mmm INFO/OK/WARN/ERR），
+ * 其余输出（console.* / 第三方 / vite）统一 info，避免把卡片内容里的「错误」字样误判。
+ */
+function svcLevelOf(plain) {
+  const m = /^\d{2}:\d{2}:\d{2}\.\d{3}\s+(INFO|OK\s|WARN|ERR)\b/.exec(plain)
+  if (m) {
+    const tag = m[1].trim()
+    return tag === 'ERR' ? 'error' : tag === 'WARN' ? 'warn' : tag === 'OK' ? 'ok' : 'info'
+  }
+  return 'info'
+}
+
+/** 服务端日志行 { seq, t, text } → 面板行（ANSI 转 HTML 只做一次，避免每次重渲染重复解析）。 */
+function toSvcRow(line) {
+  const text = String(line && line.text != null ? line.text : '')
+  const plain = stripAnsi(text)
+  return {
+    seq: Number(line && line.seq) || 0,
+    t: Number(line && line.t) || 0,
+    level: svcLevelOf(plain),
+    plain,
+    html: ansiToHtml(text),
+  }
+}
 
 // copyText 已抽到 @/runtime/clipboard.js，供 DebugPanel 与 NodeInspector 共用
 
@@ -348,6 +539,9 @@ export default {
     devSvcClass: { type: String, default: 'app__btn--warn' },
     devSvcTitle: { type: String, default: '' },
     devSvcLabel: { type: String, default: '' },
+    // 本地服务连接态（'' | unconfigured | connecting | open | closed）：
+    // 服务日志面板据此给出空态文案（未配置 / 连接中 / 已断开）。
+    devSvcConn: { type: String, default: '' },
     // 纯净截图模式（?chrome=off）：禁用状态栏 Teleport，使其留在本面板内随面板隐藏
     chromeOff: { type: Boolean, default: false },
   },
@@ -355,13 +549,30 @@ export default {
     return {
       copied: false,
       copyTimer: null,
-      // 底部错误面板模式：''（收起） | 'binding'（绑定错误） | 'event'（事件执行错误）
+      // 底部面板模式：''（收起） | 'binding'（变量绑定错误） | 'event'（事件日志 / 执行错误）
       errorPanel: '',
+      // 事件面板内部 tab：'log'（主动日志） | 'err'（执行错误），打开面板时按是否有错误自动定位
+      eventTab: 'log',
+      // 服务日志面板（errorPanel === 'svclog'）：本地服务终端输出的实时镜像
+      svcLogs: [],
+      // 已收到的最大 seq：断线重连后用 GET /__logs?since= 精确补齐缺口
+      svcLogSeq: 0,
+      // 清空面板时记录的水位线：此后取历史不会把已清掉的行再拉回来
+      svcLogFloor: 0,
+      svcLogLive: false,
+      // 自动跟随最新输出；用户向上翻阅即暂停，回到底部自动恢复
+      svcLogFollow: true,
+      svcLogDropped: 0,
+      svcLogLoading: false,
+      svcLogErr: '',
+      svcCopied: false,
       // 运行态面板：默认收起；点击状态栏「运行态」指示器切换
       statePanelOpen: false,
-      // 运行态 / 绑定错误 / 事件 三个底部面板互斥，共用同一高度变量（px）；
+      // 运行态 / 变量绑定 / 事件 三个底部面板互斥，共用同一高度变量（px）；
       // 可被顶部抓手拖拽调整，并持久化到 localStorage（cardbuddy:debug-panel-height）
       panelH: this.loadPanelH(),
+      // 底部面板头部拖拽进行中：头部高亮与竖向分隔条 .is-dragging 同一语言
+      panelDragging: false,
       // 双击结构树节点后弹出的属性面板目标节点
       inspectingComp: null,
       // 换节点时强制重建面板（内部含 CodeJar 这类托管 DOM 的控件）
@@ -383,6 +594,24 @@ export default {
     }
   },
   computed: {
+    /** 服务日志空态标题：按连接态区分「没配 / 没连上 / 连上了但还没输出」 */
+    svcEmptyText() {
+      if (this.devSvcConn === 'unconfigured') return '未配置本地开发服务'
+      if (this.devSvcConn === 'open') return '暂无服务日志'
+      return '本地服务未连接'
+    },
+    svcEmptyHint() {
+      if (this.svcLogErr) {
+        return '取历史失败：' + this.svcLogErr + '（本地服务需升级到支持 /__logs 的 cardbuddy 版本）'
+      }
+      if (this.devSvcConn === 'unconfigured') {
+        return '在顶栏「连接」中配置本地开发服务地址后，这里会实时镜像该服务终端的彩色输出'
+      }
+      if (this.devSvcConn === 'open') {
+        return 'cardbuddy 终端的输出（含配色）会实时镜像到这里；试试同步、保存、校验或截图'
+      }
+      return '连接恢复后自动继续；服务端保留最近 ' + SVC_MAX_LINES + ' 行历史，重连不丢'
+    },
     // 依赖 revision，使 setData 后数据绑定实时刷新
     scopeText() {
       void this.rt.revision
@@ -420,8 +649,8 @@ export default {
       return 'is-ok'
     },
     eventStatusTitle() {
-      if (this.eventErrors.length) return '查看事件面板（含错误）'
-      if (this.logs.length) return '查看事件面板（含日志）'
+      if (this.eventErrors.length) return '查看事件（含错误）'
+      if (this.logs.length) return '查看事件（含日志）'
       return '无事件记录'
     },
     panelErrors() {
@@ -451,6 +680,12 @@ export default {
     },
   },
   watch: {
+    // 服务日志采用懒订阅：面板打开才建 SSE（浏览器对同源并发连接有限，不与
+    // cards-changed / code-bridge 常驻连接抢位），关闭即退订，历史由服务端缓冲补。
+    errorPanel(mode) {
+      if (mode === 'svclog') this.startSvcLog()
+      else this.stopSvcLog()
+    },
     // 切换卡片时退出 Raw 模式，避免编辑内容与新卡片数据不一致；
     // 同时关闭属性面板，避免展示旧卡片节点；并拉取导入来源元数据。
     cardId: {
@@ -494,9 +729,10 @@ export default {
     // DebugPanel 一般常驻，但保险起见卸载时销毁 CodeJar、清理可能残留的拖拽监听
     this.destroyJar()
     this.cancelResize()
+    this.stopSvcLog()
   },
   methods: {
-    // 三个底部面板互斥：运行态 / 绑定错误 / 事件 不会同时出现。
+    // 三个底部面板互斥：运行态 / 变量绑定 / 事件 不会同时出现。
     // 点开运行态即关闭错误/事件面板。
     toggleStatePanel() {
       this.statePanelOpen = !this.statePanelOpen
@@ -506,10 +742,14 @@ 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 /
+     * 拖拽调整底部面板（运行态 / 变量绑定 / 事件）高度：挂在面板头部（已有 .statepanel__head /
      * .errpanel__head，无专门拖拽节点），与预览区宽度调节同一套 mousedown 机制。
      * 在头部按下后监听 document 的 mousemove / mouseup；向上拖（clientY 减小）增大面板高度，
      * 向下拖减小，符合底部停靠面板的直觉。高度夹在 [120px, 视窗 60%]，并实时同步到两个面板
@@ -518,6 +758,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
@@ -537,6 +778,7 @@ export default {
         document.removeEventListener('mousemove', onMove)
         document.removeEventListener('mouseup', onUp)
         this._resizeMove = this._resizeUp = null
+        this.panelDragging = false
         this.savePanelH()
       }
       this._resizeMove = onMove
@@ -551,6 +793,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 = ''
     },
@@ -704,6 +947,114 @@ export default {
     clearEventLogs() {
       this.rt.clearEventLogs()
     },
+    /** 打开服务日志：先补历史（含上次清空后的水位线），再建立 SSE 实时订阅。 */
+    async startSvcLog() {
+      this.svcLogFollow = true
+      await this.pullSvcLogHistory(0)
+      if (this._svcUnsub) return
+      this._svcUnsub = subscribeServiceLog(
+        (payload) => this.appendSvcLogs(payload && payload.lines),
+        (state) => {
+          this.svcLogLive = state === 'open'
+          // 断线重连成功后按 seq 补漏：缓冲仍在服务端，不会丢行也不会重复
+          if (state === 'open' && this.svcLogSeq) this.pullSvcLogHistory(this.svcLogSeq)
+        }
+      )
+    },
+    /** 关闭服务日志：退订 SSE（面板数据保留，下次打开按水位线增量补齐）。 */
+    stopSvcLog() {
+      if (this._svcUnsub) {
+        this._svcUnsub()
+        this._svcUnsub = null
+      }
+      this.svcLogLive = false
+    },
+    /**
+     * 拉取服务日志历史。
+     * @param {number} since 0 = 全量（取最新 SVC_MAX_LINES 行）；>0 = 只取 seq 大于它的行
+     */
+    async pullSvcLogHistory(since) {
+      if (this.svcLogLoading) return
+      this.svcLogLoading = true
+      const from = Math.max(Number(since) || 0, this.svcLogFloor)
+      try {
+        const snap = await fetchServiceLogs({ limit: SVC_MAX_LINES, since: from })
+        this.svcLogErr = ''
+        if (snap && snap.enabled === false) {
+          this.svcLogErr = '服务端已关闭日志流（CARDBUDDY_STREAM_LOGS=0）'
+        } else {
+          this.svcLogDropped = (snap && snap.dropped) || 0
+          if (snap && snap.seq) this.svcLogSeq = Math.max(this.svcLogSeq, snap.seq)
+          const rows = ((snap && snap.lines) || []).map(toSvcRow)
+          // from > 0 是断线补漏：走同一条去重/裁剪/跟随逻辑，避免与实时流重叠
+          if (from) this.appendSvcLogs(rows)
+          else this.svcLogs = rows
+          this.scrollSvcToBottom(true)
+        }
+      } catch (e) {
+        this.svcLogErr = (e && e.message) || String(e)
+      } finally {
+        this.svcLogLoading = false
+      }
+    },
+    /** 追加实时行：按 seq 去重（历史与实时流可能重叠）、裁剪上限、按需跟随滚动。 */
+    appendSvcLogs(lines) {
+      const list = Array.isArray(lines) ? lines : []
+      if (!list.length) return
+      const rows = []
+      for (const l of list) {
+        // 既接受服务端原始行 { seq, t, text }，也接受已转换好的面板行（含 html）
+        const row = l && l.html != null ? l : toSvcRow(l)
+        const seq = Number(row.seq) || 0
+        if (seq && seq <= this.svcLogSeq) continue
+        if (seq) this.svcLogSeq = seq
+        rows.push(row)
+      }
+      if (!rows.length) return
+      const next = this.svcLogs.concat(rows)
+      this.svcLogs = next.length > SVC_MAX_LINES ? next.slice(next.length - SVC_MAX_LINES) : next
+      if (this.svcLogFollow) this.scrollSvcToBottom()
+    },
+    clearSvcLogs() {
+      this.svcLogFloor = this.svcLogSeq
+      this.svcLogs = []
+      this.svcLogDropped = 0
+    },
+    /** 复制全部日志为纯文本（去掉 ANSI），便于贴到工单 / IM 里排障。 */
+    async copySvcLogs() {
+      const ok = await copyText(this.svcLogs.map((r) => r.plain).join('\n'))
+      if (!ok) return
+      this.svcCopied = true
+      if (this._svcCopiedTimer) clearTimeout(this._svcCopiedTimer)
+      this._svcCopiedTimer = setTimeout(() => {
+        this.svcCopied = false
+      }, 1200)
+    },
+    toggleSvcFollow() {
+      this.svcLogFollow = !this.svcLogFollow
+      if (this.svcLogFollow) this.scrollSvcToBottom(true)
+    },
+    scrollSvcToBottom(force) {
+      if (!force && !this.svcLogFollow) return
+      this.$nextTick(() => {
+        const el = this.$refs.errBody
+        if (el) el.scrollTop = el.scrollHeight
+      })
+    },
+    /** 面板体滚动：距底 24px 内视为「在底部」并恢复跟随，否则暂停（用户正在往上翻）。 */
+    onErrBodyScroll() {
+      if (this.errorPanel !== 'svclog') return
+      const el = this.$refs.errBody
+      if (!el) return
+      this.svcLogFollow = el.scrollHeight - el.scrollTop - el.clientHeight < 24
+    },
+    /** 日志 / 错误行首时间戳：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()