cardbuddy 0.6.0 → 0.8.0

package/dist/vendored/components/JsonTree.vue

@@ -135,6 +135,17 @@
       <button v-if="editable" class="jt__ctxmenu-item jt__ctxmenu-item--del" type="button" @click="ctxDelete">删除节点</button>
     </div>
     <div v-if="ctxMenu.visible" class="jt__ctxmenu-mask" @click="hideContextMenu" @contextmenu.prevent="hideContextMenu"></div>
+
+    <!-- 删除被引用节点的二次确认：警告级（橙黄+警告三角），分级见 design/深浅主题配色规范手册.md §3.4 -->
+    <ConfirmDialog
+      :visible="delConfirm.show"
+      title="删除被引用节点"
+      :message="delConfirm.message"
+      confirm-text="删除"
+      severity="warn"
+      @confirm="onDelConfirm"
+      @cancel="onDelCancel"
+    />
   </div>
 </template>
 
@@ -142,6 +153,7 @@
 import { reactive } from 'vue'
 import { copyText } from '@/runtime/clipboard.js'
 import { showAppToast } from '@/runtime/app-toast.js'
+import ConfirmDialog from './ConfirmDialog.vue'
 
 // 模块级共享状态：驱动「全部展开 / 全部折叠」和「选中节点」。
 // 所有 JsonTree 实例（含递归子实例）共享同一份，避免 provide/inject
@@ -187,6 +199,7 @@ function getByPath(obj, path) {
 
 export default {
   name: 'JsonTree',
+  components: { ConfirmDialog },
   props: {
     data: { type: [Object, Array], default: () => ({}) },
     depth: { type: Number, default: 0 },
@@ -208,6 +221,11 @@ export default {
         y: 0,
         item: null,
       },
+      delConfirm: {
+        show: false,
+        message: '',
+        item: null,
+      },
     }
   },
   computed: {
@@ -479,16 +497,29 @@ export default {
       const item = this.ctxMenu.item
       this.hideContextMenu()
       if (!item) return
-      // 检查是否被引用
+      // 检查是否被引用：被引用时走警告级二次确认（ConfirmDialog severity=warn），未引用直接删除
       const referenced = this.isNodeReferenced(item.path)
       if (referenced) {
         const key = item.path.join('.')
-        if (!confirm(`节点 “${key}” 在 schema 中被引用，删除后可能导致渲染异常。\n\n确定要删除吗？`)) {
-          return
-        }
+        this.delConfirm.message = `节点 “${key}” 在 schema 中被引用，删除后可能导致渲染异常。\n\n确定要删除吗？`
+        this.delConfirm.item = item
+        this.delConfirm.show = true
+        return
       }
       this.deleteNode(item)
     },
+    /** 警告级二次确认点「删除」：执行挂起的删除 */
+    onDelConfirm() {
+      const item = this.delConfirm.item
+      this.delConfirm.show = false
+      this.delConfirm.item = null
+      if (item) this.deleteNode(item)
+    },
+    /** 警告级二次确认点「取消」/遮罩：丢弃挂起的删除 */
+    onDelCancel() {
+      this.delConfirm.show = false
+      this.delConfirm.item = null
+    },
     /** 检测节点是否被 schema 引用（属性绑定 $key 或事件代码 state.key） */
     isNodeReferenced(path) {
       if (!this.schema) return 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/StructureTree.vue

@@ -51,8 +51,6 @@
         @click="onAddFromToolbar"
       >+ 添加组件</button>
     </div>
-    <p class="st__tip">右键节点可 复制 / 粘贴 / 副本 / 复制节点ID / 删除，右键卡片根还可 复制卡片code（英文名 / 文件夹名）；容器节点（含卡片根）还可 添加子节点、非根节点还可 前面/后面插入节点，也可在此 设置属性 / 事件；按住 Ctrl / ⌘ 点击画布元素，可在本树中定位并展开该节点</p>
-
     <ul class="st__list" @contextmenu.prevent="closeContextMenu">
       <!-- 根节点 -->
       <li class="st__node st__node--root">
@@ -152,6 +150,46 @@
       <div class="st__ctx-sep"></div>
       <button class="st__ctx-item st__ctx-item--danger" type="button" :disabled="!selectedNodeId || selectedNodeId === '_root'" @click="onCtxDelete">删除</button>
     </div>
+
+    <!--
+      帮助悬浮按钮：固定在面板左下角（不占用固定布局区域），点击弹出使用说明气泡；
+      气泡内 ✕ 关闭，再次点击按钮亦关闭。说明文本即原固定展示在面板顶部的 st__tip 内容。
+      实现：零高度的 sticky 容器吸附在滚动视口底部（滚动在外层 .debug__body），
+      按钮与气泡以绝对定位挂靠其上，内容长短均保持悬浮于面板左下角。
+    -->
+    <div class="st__help-wrap">
+      <button
+        class="st__help"
+        type="button"
+        :class="{ 'st__help--open': helpOpen }"
+        title="使用说明"
+        :aria-expanded="helpOpen"
+        @click.stop="helpOpen = !helpOpen"
+      >
+        <svg width="16" height="16" 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="9.2" />
+          <path d="M9.4 9.2a2.6 2.6 0 0 1 5.1.7c0 1.7-2.5 2.2-2.5 3.7" />
+          <line x1="12" y1="17" x2="12" y2="17.01" />
+        </svg>
+      </button>
+      <div v-if="helpOpen" class="st__help-pop" @click.stop>
+        <div class="st__help-pop-head">
+          <span class="st__help-pop-title">快捷键</span>
+          <button class="st__help-pop-close" type="button" title="关闭" @click="helpOpen = false">✕</button>
+        </div>
+        <!-- 快捷键清单：左列按键示意（kbd 芯片），右列一句话说明；与 App onKeydown 保持一致 -->
+        <ul class="st__help-pop-body st__keys">
+          <li v-for="s in shortcuts" :key="s.desc" class="st__keys-row">
+            <span class="st__keys-combo">
+              <template v-for="(key, ki) in s.keys" :key="key">
+                <kbd class="st__kbd">{{ key }}</kbd><span v-if="ki < s.keys.length - 1" class="st__kbd-plus">+</span>
+              </template>
+            </span>
+            <span class="st__keys-desc">{{ s.desc }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -518,6 +556,19 @@ export default {
       locateEnabled: false,
       // 右键上下文菜单状态：visible 显隐、x/y 为光标视口坐标（position:fixed）、nodeId 记录触发节点、node 记录触发节点对象（供「添加节点」定位容器）
       contextMenu: { visible: false, x: 0, y: 0, nodeId: '', node: null },
+      // 帮助气泡：左下角悬浮按钮弹出的使用说明，默认收起（不占用固定布局区域）
+      helpOpen: false,
+      // 快捷键清单（帮助气泡内容，与 App onKeydown 的实现保持一致）
+      shortcuts: [
+        { keys: ['⌘/Ctrl', 'C'], desc: '复制选中节点' },
+        { keys: ['⌘/Ctrl', 'V'], desc: '粘贴节点' },
+        { keys: ['⌘/Ctrl', 'D'], desc: '创建节点副本' },
+        { keys: ['⌘/Ctrl', 'Z'], desc: '撤销' },
+        { keys: ['⌘/Ctrl', '⇧', 'Z'], desc: '重做' },
+        { keys: ['Delete'], desc: '删除选中节点' },
+        { keys: ['Esc'], desc: '取消选中' },
+        { keys: ['⌘/Ctrl', '点击'], desc: '点击画布元素，在本树中定位该节点' },
+      ],
     }
   },
   computed: {

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>