cardbuddy 0.6.0 → 0.7.0

package/dist/vendored/components/CardSelect.vue

@@ -43,6 +43,12 @@
             @mousemove="highlighted = i"
             @click="choose(opt)"
           >
+            <span
+              class="csel__dot"
+              :class="{ 'csel__dot--imported': opt.imported }"
+              :title="opt.imported ? '导入卡片（含 .import-meta.json 来源信息）' : '本地卡片（无导入来源信息）'"
+              aria-hidden="true"
+            ></span>
             <span class="csel__item-id">{{ opt.id }}</span>
             <span class="csel__item-name">{{ opt.name }}</span>
             <svg v-if="opt.id === value" class="csel__check" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><use href="#icon-check" /></svg>

package/dist/vendored/components/ConfirmDialog.vue

@@ -2,15 +2,16 @@
   <transition name="confirm-fade">
     <div v-if="visible" class="confirm-mask" @click.self="$emit('cancel')">
       <div class="confirm-modal" role="alertdialog" aria-modal="true" :aria-label="title">
-        <div class="confirm-modal__title" :class="{ 'is-danger': danger }">
-          <svg v-if="danger" class="confirm-modal__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-no-entry" /></svg>
+        <div class="confirm-modal__title" :class="{ 'is-danger': severity === 'danger', 'is-warn': severity === 'warn' }">
+          <svg v-if="severity === 'danger'" class="confirm-modal__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-no-entry" /></svg>
+          <svg v-else-if="severity === 'warn'" class="confirm-modal__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-alert-triangle" /></svg>
           <svg v-else class="confirm-modal__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-gear" /></svg>
           {{ title }}
         </div>
         <div class="confirm-modal__desc">{{ message }}</div>
         <div class="confirm-modal__actions">
           <button class="confirm-modal__btn confirm-modal__btn--ghost" type="button" @click="$emit('cancel')">{{ cancelText }}</button>
-          <button class="confirm-modal__btn" :class="danger ? 'confirm-modal__btn--danger' : 'confirm-modal__btn--primary'" type="button" @click="$emit('confirm')">{{ confirmText }}</button>
+          <button class="confirm-modal__btn" :class="confirmBtnClass" type="button" @click="$emit('confirm')">{{ confirmText }}</button>
         </div>
       </div>
     </div>
@@ -31,9 +32,23 @@ export default {
     confirmText: { type: String, default: '继续' },
     /** 取消按钮文案，默认「取消」 */
     cancelText: { type: String, default: '取消' },
-    /** 是否为危险（破坏性）操作：确认按钮转红、标题加警示图标 */
-    danger: { type: Boolean, default: false },
+    /** 严重级：primary=常规确认（蓝）/ warn=警告操作（橙黄+警告三角图标，如版本推送等覆盖推送类）/
+     *  danger=明确负面结果（红+禁止图标，如全量同步覆盖本地卡等不可逆数据丢失）。
+     *  分级与配色见 design/深浅主题配色规范手册.md §2.7 / §3.4。 */
+    severity: {
+      type: String,
+      default: 'primary',
+      validator: (v) => ['primary', 'warn', 'danger'].includes(v),
+    },
   },
   emits: ['confirm', 'cancel'],
+  computed: {
+    /** 确认按钮配色档：与 severity 一一对应 */
+    confirmBtnClass() {
+      if (this.severity === 'danger') return 'confirm-modal__btn--danger'
+      if (this.severity === 'warn') return 'confirm-modal__btn--warn'
+      return 'confirm-modal__btn--primary'
+    },
+  },
 }
 </script>

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">
@@ -213,10 +179,14 @@
     </section>
 
     <!--
-      底部状态栏（仅右侧调试面板内、贴近 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 }"
@@ -257,10 +227,11 @@
         <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>
 
     <section class="errpanel" ref="errPanel" v-show="errorPanel">
       <div class="errpanel__head" @mousedown.prevent="startResize">
@@ -321,7 +292,6 @@
 
 <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 +325,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,22 +340,21 @@ 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: '',
       // 运行态面板：默认收起；点击状态栏「运行态」指示器切换
@@ -409,24 +378,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
@@ -744,11 +700,6 @@ export default {
     onHoverNode(payload) {
       this.$emit('hover-node', payload)
     },
-    /** 清空接口调用流水：调用运行时 clearApiCalls（清空数组 + 自增 apiRev），
-     *  因 apiCalls computed 返回 slice() 新引用，触发实时重渲染 */
-    clearApiLog() {
-      this.rt.clearApiCalls()
-    },
     /** 清空事件主动日志（事件面板「清空日志」按钮）；错误不清除 */
     clearEventLogs() {
       this.rt.clearEventLogs()
@@ -784,23 +735,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/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/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: {