cardbuddy 0.7.0 → 0.9.0

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,26 @@
               ><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>
+          <Transition name="pop">
+          <div v-if="helpOpen" class="ee-help__pop" @click.stop>
+            <p class="ee-help__text">{{ helpText }}</p>
+          </div>
+          </Transition>
         </aside>
 
         <section class="ee-detail">
@@ -58,7 +78,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 +127,7 @@ export default {
     return {
       eventModel: null,
       activeKey: '',
+      helpOpen: false,
       _t: null,
       _snapshot: null,
       _dirty: false,
@@ -127,6 +147,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 +166,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/NodeInspector.vue

@@ -16,7 +16,7 @@
 -->
 <template>
   <div class="ni-overlay">
-    <div class="ni-panel">
+    <div class="ni-panel modal-card">
       <div class="ni-head">
         <span class="ni-title">
           节点属性 · {{ compName }}

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/RemotePreview.vue

@@ -1,6 +1,7 @@
 <template>
+  <transition name="modal">
   <div v-if="visible" class="rp-mask" @click.self="$emit('close')">
-    <div class="rp-card" role="dialog" aria-label="远端预览二维码">
+    <div class="rp-card modal-card" role="dialog" aria-label="远端预览二维码">
       <div class="rp-head">
         <span class="rp-title">远端预览（真机扫码）</span>
         <button class="rp-x" type="button" @click="$emit('close')" aria-label="关闭">×</button>
@@ -26,6 +27,7 @@
       </div>
     </div>
   </div>
+  </transition>
 </template>
 
 <script>

package/dist/vendored/components/StructureTree.vue

@@ -172,6 +172,7 @@
           <line x1="12" y1="17" x2="12" y2="17.01" />
         </svg>
       </button>
+      <Transition name="pop">
       <div v-if="helpOpen" class="st__help-pop" @click.stop>
         <div class="st__help-pop-head">
           <span class="st__help-pop-title">快捷键</span>
@@ -189,6 +190,7 @@
           </li>
         </ul>
       </div>
+      </Transition>
     </div>
   </div>
 </template>

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>