cardbuddy 0.7.0 → 0.8.0

package/dist/vendored/components/DebugPanel.vue

@@ -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>
@@ -164,19 +181,31 @@
       并持久化到 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，作为「调试面板 + 接口调用面板」
@@ -201,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>
@@ -211,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>
@@ -233,12 +261,34 @@
       </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"
@@ -246,47 +296,86 @@
             @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>
 
@@ -357,11 +446,15 @@ export default {
       copyTimer: 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 的控件）
@@ -506,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 /
@@ -518,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
@@ -537,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
@@ -551,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 = ''
     },
@@ -704,6 +804,13 @@ export default {
     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()

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

package/dist/vendored/components/LogValue.vue

@@ -7,7 +7,8 @@
 -->
 <template>
   <span v-if="!complex" class="log__val" :class="'jt__val--' + typeClass">{{ display }}</span>
-  <div v-else class="log__json"><ApiPayloadTree :value="value" :max-depth="14" /></div>
+  <!-- 日志里的对象/数组参数：根节点默认一行摘要、点击展开，保证日志行密度 -->
+  <div v-else class="log__json"><ApiPayloadTree :value="value" :max-depth="14" root-collapsed /></div>
 </template>
 
 <script>

package/dist/vendored/components/PropControl.vue

@@ -233,9 +233,13 @@ export default {
 .pc-body { line-height: 0; }
 .pc-srcs { display: flex; gap: 4px; line-height: 1.5; }
 .pc-src {
-  flex: 1; font-size: 12px; padding: 3px 0; border: 1px solid var(--border);
+  flex: 1; height: 24px; font-size: 12px; padding: 0 10px; border: 1px solid var(--border);
   background: transparent; color: var(--text-dim); border-radius: 6px; cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
 }
-.pc-src.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
+.pc-src:hover { background: var(--bg-hover); color: var(--text); }
+/* 选中态与分段控件 .st-seg 同语言：浅底 + 同色文字 + 发丝描边，不做实心填充 */
+.pc-src.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
+.pc-src.is-active:hover { background: var(--accent-soft); color: var(--accent); }
 .pc--readonly .pc-src { opacity: .6; cursor: not-allowed; }
 </style>

package/dist/vendored/components/setters/SetCode.vue

@@ -12,9 +12,40 @@
 -->
 <template>
   <div class="st-code">
-    <div ref="editor" class="st-code__editor" :class="{ 'is-disabled': disabled }"></div>
+    <div
+      ref="editor"
+      class="st-code__editor"
+      :class="{ 'is-disabled': disabled, 'is-bridged': !!bridge }"
+    ></div>
+    <!-- 右上角语言标签：弱化的只读标识，不参与交互 -->
+    <span class="st-code__lang" aria-hidden="true">JS</span>
     <div class="st-code__foot">
       <span class="st-code__hint">{{ lines }} 行 · {{ chars }} 字符</span>
+      <!-- VSCode 代码桥：生成临时 js 用外部编辑器编辑，保存实时回写；断开即删临时文件 -->
+      <span class="st-code__foot-actions">
+        <span v-if="bridge" class="st-code__bridge-tag" :title="bridge.file">VSCode 同步中</span>
+        <button
+          type="button"
+          class="st-code__vscode"
+          :class="{ 'is-on': !!bridge }"
+          :title="
+            bridge
+              ? '断开 VSCode 桥接并删除临时文件'
+              : '在 VSCode 中编辑：保存实时同步回编辑区，断开后清除临时文件'
+          "
+          :disabled="disabled"
+          @click="toggleBridge"
+        >
+          <!-- 图标左侧小字：未桥接时是动作说明；桥接后由状态徽标接替，避免两段文字挤一行 -->
+          <span v-if="!bridge" class="st-code__vscode-label">在编辑器中打开</span>
+          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+            <path
+              fill="currentColor"
+              d="M23.15 2.587 18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"
+            />
+          </svg>
+        </button>
+      </span>
     </div>
   </div>
 </template>
@@ -24,13 +55,20 @@ import { CodeJar } from 'codejar'
 import Prism from 'prismjs'
 import 'prismjs/components/prism-javascript'
 import { setterProps, setterEmits } from './props.js'
+import {
+  codeBridgeOpen,
+  codeBridgeFetch,
+  codeBridgeHeartbeat,
+  codeBridgeClose,
+  subscribeCodeBridge,
+} from '../../api.js'
 
 export default {
   name: 'SetCode',
   props: setterProps,
   emits: setterEmits,
   data() {
-    return { code: '' }
+    return { code: '', bridge: null }
   },
   computed: {
     codeKey() {
@@ -49,6 +87,8 @@ export default {
   },
   beforeUnmount() {
     if (this._t) clearTimeout(this._t)
+    // 组件卸载（抽屉关闭 / 切节点 / key 重建）即结束桥接会话，服务端删除临时文件
+    this.teardownBridge(true)
     if (this._jar && this._jar.destroy) this._jar.destroy()
   },
   methods: {
@@ -75,7 +115,7 @@ export default {
       this._jar.onUpdate((code) => this.onCode(code))
     },
     onCode(code) {
-      if (this.disabled) return
+      if (this.disabled || this.bridge) return
       this.code = code
       // 保留 compiled 等未知键，只覆写 codeKey
       const base = this.value && typeof this.value === 'object' ? Object.assign({}, this.value) : {}
@@ -85,6 +125,74 @@ export default {
       if (this._t) clearTimeout(this._t)
       this._t = setTimeout(() => this.$emit('change'), 400)
     },
+    /* ---------------- VSCode 代码桥 ---------------- */
+    toggleBridge() {
+      if (this.bridge) this.teardownBridge(true)
+      else this.setupBridge()
+    },
+    async setupBridge() {
+      if (this.disabled || this.bridge) return
+      const label = this.itemInfo && this.itemInfo.itemKey ? String(this.itemInfo.itemKey) : ''
+      try {
+        const info = await codeBridgeOpen(this.code, label)
+        this.bridge = { id: info.id, file: info.file }
+      } catch (e) {
+        console.error('[VSCode 桥接建立失败]', e)
+        return
+      }
+      // 桥接期间 Web 编辑区只读：外部编辑器为唯一写入源，避免双向冲突
+      this.setEditorEditable(false)
+      this._hb = setInterval(() => {
+        if (!this.bridge) return
+        codeBridgeHeartbeat(this.bridge.id).catch(() => {})
+      }, 5000)
+      this._bridgeUnsub = subscribeCodeBridge((payload) => {
+        if (!this.bridge || !payload || payload.id !== this.bridge.id) return
+        // code-bridge-closed 带 reason（ttl / client）：服务端已清理，本地同步收 UI
+        if (payload.reason) return this.teardownBridge(false)
+        this.pullBridgeCode()
+      })
+    },
+    async pullBridgeCode() {
+      if (!this.bridge) return
+      let r
+      try {
+        r = await codeBridgeFetch(this.bridge.id)
+      } catch (e) {
+        return // 会话已失效：等 closed 事件或 TTL 收尾
+      }
+      const code = String(r.code == null ? '' : r.code)
+      if (code === this.code) return
+      this.applyExternalCode(code)
+    },
+    applyExternalCode(code) {
+      this.code = code
+      // callOnUpdate=false：不触发 onUpdate，切断「回写 → input → 再写临时文件」回声环
+      if (this._jar) this._jar.updateCode(code, false)
+      const base = this.value && typeof this.value === 'object' ? Object.assign({}, this.value) : {}
+      base[this.codeKey] = code
+      this.$emit('input', base)
+      if (this._t) clearTimeout(this._t)
+      this._t = setTimeout(() => this.$emit('change'), 400)
+    },
+    teardownBridge(notifyServer) {
+      const b = this.bridge
+      this.bridge = null
+      if (this._hb) {
+        clearInterval(this._hb)
+        this._hb = null
+      }
+      if (this._bridgeUnsub) {
+        this._bridgeUnsub()
+        this._bridgeUnsub = null
+      }
+      this.setEditorEditable(true)
+      if (b && notifyServer) codeBridgeClose(b.id).catch(() => {})
+    },
+    setEditorEditable(on) {
+      const el = this.$refs.editor
+      if (el) el.setAttribute('contenteditable', on ? 'true' : 'false')
+    },
   },
 }
 </script>