cardbuddy 0.6.0 → 0.7.0

package/dist/vendored/App.vue

@@ -3,7 +3,7 @@
   右侧调试面板。
 -->
 <template>
-  <div class="app" :class="{ 'app--chrome-off': chromeOff }" :style="{ '--preview-width': previewWidth + 'px' }">
+  <div class="app" :class="{ 'app--chrome-off': chromeOff }" :style="{ '--preview-width': previewWidth + 'px', '--api-panel-width': apiPanelWidth + 'px' }">
     <header class="app__bar" v-show="!chromeOff">
       <strong class="app__logo">
         <img class="app__logo-icon" :src="logoUrl" alt="" />
@@ -74,23 +74,23 @@
             <span>{{ copiedSchema ? '已复制 ✓' : '复制' }}</span>
           </button>
         </div>
-        <!-- 远端：合并「远端保存 / 远端预览 / 全量同步 / 选中卡片同步」为一个分组，组名「远端」，云图标 -->
+        <!-- 远端：合并「远端保存 / 远端预览 / 切图上传 / 全量同步 / 选中卡片同步」为一个分组，组名「远端」，云图标 -->
         <Dropdown
           class="app__remote-menu"
           size="md"
           placement="bottom-end"
-          :disabled="savingRemote || syncingRemote"
-          :title="savingRemote ? '正在保存至远端…' : (syncingRemote ? '同步中…' : '远端操作：保存到 FinMall / 真机预览 / 全量或选中卡片同步')"
+          :disabled="savingRemote || syncingRemote || uploadingSlices"
+          :title="savingRemote ? '正在保存至远端…' : (syncingRemote ? '同步中…' : (uploadingSlices ? '正在上传切图…' : '远端操作：保存到 FinMall / 真机预览 / 切图上传 / 全量或选中卡片同步'))"
           data-testid="remote-group"
         >
           <template #trigger="{ open }">
             <button
               type="button"
               class="app__btn app__btn--remote"
-              :class="{ 'app__btn--warn': savedRemote && verifiedRemote === false, 'app__remote-trigger--active': open, 'is-processing': savingRemote || syncingRemote }"
-              :disabled="savingRemote || syncingRemote"
+              :class="{ 'app__btn--warn': savedRemote && verifiedRemote === false, 'app__remote-trigger--active': open, 'is-processing': savingRemote || syncingRemote || uploadingSlices }"
+              :disabled="savingRemote || syncingRemote || uploadingSlices"
             >
-              <svg v-if="savingRemote || syncingRemote" class="app__icon app__icon--spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-loading" /></svg>
+              <svg v-if="savingRemote || syncingRemote || uploadingSlices" class="app__icon app__icon--spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-loading" /></svg>
               <svg v-else-if="savedRemote && verifiedRemote !== false" class="app__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-cloud-check" /></svg>
               <svg v-else-if="savedRemote && verifiedRemote === false" class="app__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-cloud-alert" /></svg>
               <svg v-else class="app__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-cloud" /></svg>
@@ -115,8 +115,30 @@
               <svg class="app__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-refresh" /></svg>
               <span>全量同步</span>
             </li>
+            <!-- 切图上传：仅点击时执行，把「当前卡片引用到的」src/slices 切图上传到 FinMall 图片库
+                 （CC0000.do），并把该卡 schema/data 里的 /slices/ 引用改写为返回的 @filestore/ 线上地址。
+                 没有任何自动上传路径；共享切图若已上传过（sha256 命中 src/slices/manifest.json）直接复用地址。
+                 不要求 hasCardSource：本地自建卡同样需要先把切图传上去，才能推版本 / 出真机预览。 -->
+            <li class="app__remote-item app__remote-item--upload" :class="{ 'is-disabled': !preview || !selectedId || uploadingSlices }" :title="uploadingSlices ? '正在上传切图…' : '切图上传：把当前卡片引用的本地切图（src/slices）上传到 FinMall 图片库，并把卡片里的 /slices/ 引用替换为线上地址（@filestore/…）；本地切图文件保留'" data-testid="slice-upload" role="menuitem" @click="chooseRsave('slices'); close()">
+              <svg class="app__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-image-upload" /></svg>
+              <span>切图上传</span>
+            </li>
           </ul></template>
         </Dropdown>
+        <!-- 接口调用面板开关：右侧常驻面板的展开/收起，状态持久化 -->
+        <button
+          class="app__btn app__btn--icon"
+          :class="{ 'app__btn--active': apiPanelOpen }"
+          type="button"
+          :title="apiPanelOpen ? '收起接口调用面板' : '打开接口调用面板'"
+          :aria-pressed="apiPanelOpen"
+          @click="toggleApiPanel"
+        >
+          <svg class="app__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <rect x="3" y="4" width="18" height="16" rx="2" />
+            <line x1="15" y1="4" x2="15" y2="20" />
+          </svg>
+        </button>
         <!-- 主题切换：深色（当前）/ 浅色，复用同名 CSS 变量整体换肤，状态持久化 -->
         <button
           class="theme-toggle"
@@ -315,33 +337,59 @@
         title="拖拽调整预览区域宽度"
       ></div>
 
-      <DebugPanel
-        v-show="!chromeOff"
-        :rt="rt"
-        :preview="preview"
-        :schema="currentSchema"
-        :card-id="selectedId"
-        :reload-token="reloadToken"
-        :card-count="cardCount"
-        :selected-node-id="selectedNodeId"
-        :move-collapse-token="moveCollapseToken"
-        :active-tab="activeTab"
-        @schema-changed="onSchemaChanged"
-        @schema-commit="onSchemaCommit"
-        @select-node="onSelectNode"
-        @update:active-tab="activeTab = $event"
-        @add-node="onAddNode"
-        @move-node="onMoveNode"
-        @hover-node="onHoverNode"
-        @copy-selected="copySelectedNode"
-        @paste="pasteNode"
-        @duplicate="duplicateNode"
-        @delete-selected="deleteSelectedNode"
-        @reset-import="onRefresh"
-        :dev-svc-class="devSvcClass"
-        :dev-svc-title="devSvcTitle"
-        :dev-svc-label="devSvcLabel"
-      />
+      <!-- 拖拽分隔条：位于调试面板与右侧「接口调用」面板之间，拖动调整右栏宽度。
+           约束：中栏（调试面板）最小宽度 ≥ 屏宽 1/3，右栏最小宽度 ≥ 320px（见 startApiDrag） -->
+      <div
+        v-show="!chromeOff && apiPanelOpen"
+        class="splitter splitter--api"
+        :class="{ 'is-dragging': apiDragging }"
+        @mousedown.prevent="startApiDrag"
+        title="拖拽调整接口调用面板宽度"
+      ></div>
+
+      <!-- 中右工作区：上为「调试面板 + 接口调用面板」两栏，下为贯穿两栏的共同状态栏。
+           状态栏由 DebugPanel 内 Teleport 注入 #app-workside-bar；Teleport 目标须在 DOM 中
+           先于面板挂载，故 .workside__bar 写在前面，以 flex order 视觉置底。 -->
+      <div class="workside" v-show="!chromeOff">
+        <div id="app-workside-bar" class="workside__bar"></div>
+        <div class="workside__cols">
+          <DebugPanel
+            :chrome-off="chromeOff"
+            :rt="rt"
+            :preview="preview"
+            :schema="currentSchema"
+            :card-id="selectedId"
+            :reload-token="reloadToken"
+            :card-count="cardCount"
+            :selected-node-id="selectedNodeId"
+            :move-collapse-token="moveCollapseToken"
+            :active-tab="activeTab"
+            @schema-changed="onSchemaChanged"
+            @schema-commit="onSchemaCommit"
+            @select-node="onSelectNode"
+            @update:active-tab="activeTab = $event"
+            @add-node="onAddNode"
+            @move-node="onMoveNode"
+            @hover-node="onHoverNode"
+            @copy-selected="copySelectedNode"
+            @paste="pasteNode"
+            @duplicate="duplicateNode"
+            @delete-selected="deleteSelectedNode"
+            @reset-import="onRefresh"
+            :dev-svc-class="devSvcClass"
+            :dev-svc-title="devSvcTitle"
+            :dev-svc-label="devSvcLabel"
+          />
+
+          <!-- 右侧常驻「接口调用」面板：与预览列 / 调试面板呈左中右布局，
+               展开/收起由顶栏按钮与面板内 ✕ 控制，初始状态持久化 -->
+          <ApiCallPanel
+            v-if="apiPanelOpen"
+            :rt="rt"
+            @close="apiPanelOpen = false"
+          />
+        </div>
+      </div>
     </main>
     <!-- 远端预览二维码弹层：点击顶栏「远端预览」按钮打开，手机（FinMall App）扫码真机查看 -->
     <RemotePreview
@@ -413,7 +461,7 @@
       :message="confirm.message"
       :confirm-text="confirm.confirmText"
       :cancel-text="confirm.cancelText"
-      :danger="confirm.danger"
+      :severity="confirm.severity"
       @confirm="onConfirmDialog"
       @cancel="onCancelDialog"
     />
@@ -444,6 +492,7 @@ import {
 } from '@/runtime/clipboard-node.js'
 import RenderTree from '@/components/RenderTree.vue'
 import DebugPanel from '@/components/DebugPanel.vue'
+import ApiCallPanel from '@/components/ApiCallPanel.vue'
 import CardSelect from '@/components/CardSelect.vue'
 import AlertCardLayer from '@/components/AlertCardLayer.vue'
 import DeviceOverlay from '@/components/DeviceOverlay.vue'
@@ -482,7 +531,7 @@ if (typeof window !== 'undefined' && import.meta.env.DEV) window.__rt = cardRunt
 
 export default {
   name: 'App',
-  components: { RenderTree, DebugPanel, CardSelect, AlertCardLayer, DeviceOverlay, PickerOverlay, DatePickerOverlay, SelectionOverlay, HoverGuides, RemotePreview, AppToast, ConfirmDialog, CardGallery, ComponentPalette, Switch },
+  components: { RenderTree, DebugPanel, ApiCallPanel, CardSelect, AlertCardLayer, DeviceOverlay, PickerOverlay, DatePickerOverlay, SelectionOverlay, HoverGuides, RemotePreview, AppToast, ConfirmDialog, CardGallery, ComponentPalette, Switch },
   provide() {
     return {
       adapter,
@@ -536,9 +585,12 @@ export default {
       localSchema: null,
       localData: null,
       selectedNodeId: '',
-      // 当前激活的调试面板 tab（接口调用/绑定数据/组件结构/卡片来源）。
+      // 当前激活的调试面板 tab（绑定数据/组件结构/卡片来源）。
       // 画布 Ctrl/⌘ 点击会自动切到「组件结构」tab 并在节点树聚焦选中，无需预先停在结构树 tab。
       activeTab: 'scope',
+      // 右侧常驻「接口调用」面板：展开/收起由顶栏按钮与面板内 ✕ 控制，
+      // 初始状态持久化到 localStorage（cardbuddy:api-panel-open）
+      apiPanelOpen: true,
       // 组件结构树「添加」面板：addNodePanelOpen 控制弹层显隐；addNodeTarget 记录
       // 插入锚点与模式（{ node, mode }，来自结构树 add-node 事件）：
       //   node = 右键/选中 viewNode（null 或 Root → 视作根）；mode 决定落位规则：
@@ -565,20 +617,22 @@ export default {
       remotePreviewOpen: false, // 「远端预览」二维码弹层开关
       syncTarget: null, // 'full' | 'selected' | null —— 标记上一次/正在进行的同步模式，用于按钮反馈
       syncTimer: null,
+      uploadingSlices: false, // 「切图上传」进行中（远端分组，仅用户点击触发，无自动上传）
       // 登录凭据弹窗（远程同步缺凭据时弹出，填写账号密码写入 .local/credentials.json）
       loginModal: false,
       loginName: '',
       loginPassword: '',
       loginSubmitting: false,
       loginError: '',
-      // 二次确认弹窗（版本推送 / 当前同步 / 全量同步 等写/覆盖类操作前弹出，确认后才执行 onConfirm）
+      // 二次确认弹窗（版本推送 / 当前同步 / 全量同步 等写/覆盖类操作前弹出，确认后才执行 onConfirm）。
+      // severity 三档：primary 常规 / warn 警告（橙黄+警告三角，覆盖类操作：版本推送、全量同步）/ danger 危险（红+禁止，仅明确负面结果如删除，暂无内置操作使用）
       confirm: {
         show: false,
         title: '',
         message: '',
         confirmText: '继续',
         cancelText: '取消',
-        danger: false,
+        severity: 'primary',
         onConfirm: null,
       },
       // 编辑历史（撤销/重做）：每个快照为 { schema, data }，data 即 rt.rootScope（数据绑定），
@@ -599,6 +653,7 @@ export default {
       ],
       // —— 预览区宽度可调（拖拽分隔条 / 预设尺寸，画布按实际像素宽度布局，无 transform 缩放）——
       _previewWidthPx: 372, // 预览列宽度（像素，持久化到 localStorage）；第一次打开未主动设置时默认 372px
+      _apiPanelWidthPx: 360, // 右侧「接口调用」面板宽度（像素，持久化到 localStorage）；默认 360px
       presetSizes: [ // 预设尺寸下拉选项（仅宽度；高度随列高动态一致）
         { key: 375, value: '375' },
         { key: 430, value: '430' },
@@ -607,6 +662,7 @@ export default {
       stageWidth: typeof window !== 'undefined' ? window.innerWidth : 1280, // 舞台实际宽度（ResizeObserver 实测后更新）
       stageHeight: typeof window !== 'undefined' ? window.innerHeight - 52 : 748, // 舞台实际高度（contain 缩放的“高度上限”基准）
       dragging: false, // 是否正在拖拽分隔条
+      apiDragging: false, // 是否正在拖拽「接口调用」面板分隔条
       _stageObserver: null,
       _dragMove: null,
       _dragUp: null,
@@ -745,6 +801,15 @@ export default {
     canvasW() {
       return Math.round(this.previewWidth || 375)
     },
+    // 右侧「接口调用」面板宽度（像素）：限制在 [320, 舞台宽度 - 预览列宽 - 中栏最小宽(屏宽 1/3)]，
+    // 保证中栏（调试面板）最小宽度不小于三分之一屏幕宽度、右栏不小于 320px
+    apiPanelWidth() {
+      const minW = 320 // 右栏最小宽度
+      const midMin = Math.floor((typeof window !== 'undefined' ? window.innerWidth : 1280) / 3)
+      const maxW = Math.max(minW, Math.floor((this.stageWidth || 0) - this.previewWidth - midMin))
+      const w = this._apiPanelWidthPx || 360
+      return Math.max(minW, Math.min(maxW, w))
+    },
     // 缩放外框占满整列（宽高交由 CSS flex 填满；画布不再做 transform 缩放，直接按实际尺寸布局）
     frameStyle() {
       return {}
@@ -763,6 +828,14 @@ export default {
     theme(val) {
       document.documentElement.dataset.theme = val
     },
+    // 「接口调用」面板展开/收起状态变化（顶栏按钮 toggleApiPanel 或面板内 ✕ 关闭）时统一持久化
+    apiPanelOpen(val) {
+      try {
+        localStorage.setItem('cardbuddy:api-panel-open', val ? '1' : '0')
+      } catch (e) {
+        /* localStorage 不可用时忽略 */
+      }
+    },
   },
   beforeUnmount() {
     if (this.viewportObserver) this.viewportObserver.disconnect()
@@ -784,6 +857,7 @@ export default {
     if (this.$refs.phoneViewport) this.viewportObserver.observe(this.$refs.phoneViewport)
     // 预览区宽度可调：实测舞台尺寸，驱动 previewWidth/frameStyle 自适应窗口变化
     this.loadPreviewWidth()
+    this.loadApiPanelWidth()
     this._stageObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         this.stageWidth = Math.round(entry.contentRect.width)
@@ -809,6 +883,13 @@ export default {
       /* localStorage 不可用时忽略 */
     }
     document.documentElement.dataset.theme = this.theme
+    // 右侧「接口调用」面板：恢复本地持久化的展开/收起状态（默认展开）
+    try {
+      const v = localStorage.getItem('cardbuddy:api-panel-open')
+      if (v === '0') this.apiPanelOpen = false
+    } catch (e) {
+      /* localStorage 不可用时忽略 */
+    }
     // 实时拉取卡片列表（不再依赖启动快照），再载入首张卡
     await this.fetchCardList()
     // 深链：若 URL 带 ?card=<id> 且命中列表，则预选该卡（供「远端预览」二维码扫码直达）
@@ -956,6 +1037,50 @@ export default {
       this._previewWidthPx = Math.max(minW, Math.min(maxW, w))
       this.savePreviewWidth()
     },
+    // —— 接口调用面板宽度调节 ——
+    // 拖拽分隔条：拖动改变右栏宽度（向左拖加宽、向右拖收窄），松手持久化。
+    // 约束：右栏 [320px, 舞台宽 - 预览列宽 - 中栏最小宽(屏宽 1/3)]，与 apiPanelWidth computed 一致
+    startApiDrag() {
+      if (this.chromeOff || !this.apiPanelOpen) return
+      this.apiDragging = true
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      const stage = this.$refs.stageEl
+      this._apiDragMove = (ev) => {
+        const rect = stage.getBoundingClientRect()
+        const minW = 320 // 右栏最小宽度
+        const midMin = Math.floor(window.innerWidth / 3) // 中栏最小宽度：屏宽 1/3
+        const maxW = Math.max(minW, Math.floor(rect.width - this.previewWidth - midMin))
+        const w = Math.max(minW, Math.min(maxW, rect.right - ev.clientX))
+        this._apiPanelWidthPx = w
+      }
+      this._apiDragUp = () => {
+        this.apiDragging = false
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        document.removeEventListener('mousemove', this._apiDragMove)
+        document.removeEventListener('mouseup', this._apiDragUp)
+        this.saveApiPanelWidth()
+      }
+      document.addEventListener('mousemove', this._apiDragMove)
+      document.addEventListener('mouseup', this._apiDragUp)
+    },
+    // 读取上次保存的接口调用面板宽度（像素）；首次打开（无记录）时保持默认 360px
+    loadApiPanelWidth() {
+      try {
+        const v = localStorage.getItem('cardbuddy:api-panel-width')
+        if (v != null) {
+          const px = parseInt(v, 10)
+          if (!Number.isNaN(px) && px >= 320) this._apiPanelWidthPx = px
+        }
+      } catch (e) { /* localStorage 不可用时忽略 */ }
+    },
+    // 持久化接口调用面板宽度（像素，取夹取后的实际值）到 localStorage
+    saveApiPanelWidth() {
+      try {
+        localStorage.setItem('cardbuddy:api-panel-width', String(Math.round(this.apiPanelWidth)))
+      } catch (e) { /* 忽略 */ }
+    },
     /** 背景下拉：选中某项 */
     chooseBg(key) {
       this.canvasBg = key
@@ -1020,6 +1145,10 @@ export default {
         /* localStorage 不可用时忽略 */
       }
     },
+    /** 展开/收起右侧常驻「接口调用」面板（默认展开）；持久化由 apiPanelOpen 监听器统一处理 */
+    toggleApiPanel() {
+      this.apiPanelOpen = !this.apiPanelOpen
+    },
     /**
      * 整卡校验徽标（Q3：仅 ok/error，不展开 bindingErrors 明细）。
      * 调 /__validate（契约硬校验）与 /__render-status（结构合法 + 渲染不抛错）两个既有端点，
@@ -2010,6 +2139,7 @@ export default {
           title: '全量同步',
           message: '即将从远端 FinMall 拉取完整卡片列表，并逐张覆盖本地同名卡片。本地独有卡片会保留，但被覆盖卡片的未保存改动将丢失，且无法撤销。是否继续？',
           confirmText: '继续同步',
+          severity: 'warn',
           onConfirm: () => this.syncRemote(),
         })
         return
@@ -2022,7 +2152,7 @@ export default {
         onConfirm: () => this.syncSelected(),
       })
     },
-    /** 「远端」分组菜单项：保存到远端 / 远端预览（保存到远端先二次确认） */
+    /** 「远端」分组菜单项：版本推送 / 在线预览 / 切图上传（写覆盖类操作先二次确认） */
     chooseRsave(target) {
       if (target === 'save') {
         if (!this.preview || !this.selectedId || this.savingRemote || !this.hasCardSource) return
@@ -2030,23 +2160,38 @@ export default {
           title: '版本推送',
           message: `即将把本地卡片「${this.selectedId}」的当前版本推送并覆盖到远端 FinMall。线上版本会被立即更新，且该操作不可撤销。是否继续？`,
           confirmText: '继续推送',
-          danger: true,
+          severity: 'warn',
           onConfirm: () => this.saveToRemote(),
         })
         return
       }
+      if (target === 'slices') {
+        if (!this.preview || !this.selectedId || this.uploadingSlices) return
+        this.requestConfirm({
+          title: '切图上传',
+          message:
+            `即将把当前卡片「${this.selectedId}」引用的本地切图（src/slices/）上传到 FinMall 图片库，` +
+            `并把卡片里的 /slices/ 引用替换为线上地址（@filestore/…）。本地切图文件保留不动；` +
+            `内容未变的切图会直接复用已有线上地址，不重复上传。` +
+            (this.historyDirty ? '\n当前卡片有未保存的改动，会先保存到本地再执行，避免被随后的重载丢弃。' : '') +
+            '\n是否继续？',
+          confirmText: '继续上传',
+          onConfirm: () => this.uploadCardSlices(),
+        })
+        return
+      }
       if (!this.preview || !this.selectedId || !this.hasCardSource) return
       this.remotePreviewOpen = true
     },
     /** 请求二次确认：统一在写/覆盖类操作前弹出，确认后执行 onConfirm 回调 */
-    requestConfirm({ title, message, confirmText, cancelText, danger, onConfirm }) {
+    requestConfirm({ title, message, confirmText, cancelText, severity, onConfirm }) {
       this.confirm = {
         show: true,
         title,
         message,
         confirmText: confirmText || '继续',
         cancelText: cancelText || '取消',
-        danger: !!danger,
+        severity: ['primary', 'warn', 'danger'].includes(severity) ? severity : 'primary',
         onConfirm,
       }
     },
@@ -2217,6 +2362,81 @@ export default {
         this.savingRemote = false
       }
     },
+    /**
+     * 把「当前卡片」引用的本地切图上传到 FinMall 图片库（CC0000.do），并把卡片里的
+     * `/slices/<name>` 引用改写为返回的线上地址（`@filestore/...`）。
+     * 经 dev-server 的 /__slice-upload 端点触发（端点内部复用 finmall-card-sync 的 uploadSlices，
+     * 与「同步」「版本推送」共用同一后台 FinMall 会话）。纯前端无法直接调 FinMall：
+     * 跨域 + 需 token（token 只在页面上下文内读取，不回传 Node），故必须经此中转。
+     *
+     * 纪律：
+     * - **只在用户点击「远端 → 切图上传」时执行**，保存 / 推送 / 同步都不会顺带上传切图；
+     * - 上传与改写范围都只限当前卡；共享切图若已被别的卡上传过（sha256 命中
+     *   src/slices/manifest.json），直接复用线上地址，不重复上传；
+     * - 本地 src/slices 真源保留不动（映射清单记录 本地文件 ↔ 线上地址）。
+     */
+    async uploadCardSlices() {
+      if (!this.preview || !this.selectedId || this.uploadingSlices) return
+      const id = this.selectedId
+      this.uploadingSlices = true
+      try {
+        // 端点改写的是磁盘上的 schema.json；若编辑器里有未保存改动，先落盘再上传，
+        // 否则随后从磁盘重载会把未保存编辑静默丢掉。
+        if (this.historyDirty) {
+          const saved = await this.saveCard()
+          if (!saved) throw new Error('本地保存失败，已中止切图上传')
+        }
+        // 标记本窗口即将落盘（端点会改写 src/cards/<id>/schema.json），吸收 watcher 经 SSE 推回的
+        // cards-changed 回声，避免误弹「卡片已在编辑器外被修改」提示。
+        this.selfSaveId = id
+        this.selfSaveAt = Date.now()
+        const res = await apiFetch('/__slice-upload', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ cardId: id }),
+        })
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}))
+          throw new Error(err.message || err.error || 'HTTP ' + res.status)
+        }
+        const r = await res.json()
+        if (r.needCredentials) {
+          // 凭据缺失：弹出登录表单，由用户填写账号密码后再点一次「切图上传」
+          this.openLoginModal()
+          return
+        }
+        // 上传可能耗时数秒（逐张传），落盘发生在响应前一刻：再刷一次自保存时间戳，
+        // 让 2.5s 抑制窗口覆盖到这次回声（否则慢上传会漏抑制）。
+        this.selfSaveAt = Date.now()
+        if (!r.success) {
+          const detail = (r.failed || []).map((f) => `${f.name}: ${f.error}`).join('; ')
+          throw new Error(detail || '切图上传失败')
+        }
+        // 磁盘上的引用已被改写为线上地址，重新载入让预览即时生效。
+        await this.onRefresh()
+        const replaced = (r.rewritten || []).reduce((n, item) => n + item.count, 0)
+        if (!r.referenced) {
+          showAppToast('当前卡片没有引用本地切图，无需上传', 'ok')
+        } else {
+          showAppToast(
+            `切图上传完成：新上传 ${r.uploaded.length} 张、复用 ${r.skipped.length} 张，替换引用 ${replaced} 处`,
+            'ok'
+          )
+        }
+        if (r.dangling && r.dangling.length) {
+          showAppToast(`有 ${r.dangling.length} 处引用的切图在 src/slices 下不存在：${r.dangling.join('、')}`, 'err')
+        }
+      } catch (e) {
+        console.error('[切图上传失败]', e)
+        // 远端操作接口报错：仅弹出错误提示，不写入事件/绑定错误记录（避免污染事件面板）
+        showAppToast('切图上传失败：' + (e && e.message), 'err')
+        // 未落盘：清除自保存标记，避免误吞后续真正的外部改动
+        this.selfSaveId = ''
+        this.selfSaveAt = 0
+      } finally {
+        this.uploadingSlices = false
+      }
+    },
     /** 实时拉取卡片列表（GET /__cards），替换下拉框选项，不缓存 */
     async fetchCardList() {
       try {
@@ -2309,7 +2529,6 @@ export default {
         message: `卡片「${name}」的 schema / data 在编辑器外发生了变更（例如 IDE 或其他工具覆盖了文件）。\n当前编辑器存在未保存的改动，是否放弃本地未保存改动并重新载入磁盘版本？`,
         confirmText: '重新载入',
         cancelText: '保留我的改动',
-        danger: false,
         onConfirm: () => this.loadCard(id),
       })
     },

package/dist/vendored/assets/svgIcons/icons.svg

@@ -12,11 +12,16 @@
   <symbol id="icon-cloud-alert" viewBox="0 0 24 24"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path><line x1="12" y1="13" x2="12" y2="16"></line><line x1="12" y1="18" x2="12.01" y2="18"></line></symbol>
   <symbol id="icon-cloud" viewBox="0 0 24 24"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></symbol>
   <symbol id="icon-upload-cloud" viewBox="0 0 24 24"><path d="M12 13v8"></path><path d="M8 17l4-4 4 4"></path><path d="M20 16.5A4.5 4.5 0 0 0 17.5 8h-1.26A7 7 0 1 0 4 14.9"></path></symbol>
+  <!-- 切图上传（image-upload）：图片框 + 框内上箭头，语义「把本地切图传到远端图床」，
+       与 icon-upload-cloud（版本推送）区分开：一个传素材，一个传卡片版本。 -->
+  <symbol id="icon-image-upload" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M12 19v-7"></path><path d="M9 15l3-3 3 3"></path></symbol>
   <symbol id="icon-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"></rect><rect x="14" y="3" width="7" height="7" rx="1"></rect><rect x="3" y="14" width="7" height="7" rx="1"></rect><path d="M14 14h3v3M21 14v7h-7v-3"></path></symbol>
   <symbol id="icon-sync-box" viewBox="0 0 24 24"><rect x="3" y="5" width="14" height="14" rx="2" ry="2"></rect><path d="M21 7v10a2 2 0 0 1-2 2H7"></path></symbol>
   <symbol id="icon-locate" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"></circle><line x1="12" y1="1" x2="12" y2="5"></line><line x1="12" y1="19" x2="12" y2="23"></line><line x1="1" y1="12" x2="5" y2="12"></line><line x1="19" y1="12" x2="23" y2="12"></line></symbol>
   <symbol id="icon-gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></symbol>
   <symbol id="icon-no-entry" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="6" y1="6" x2="18" y2="18"></line></symbol>
+  <!-- 警告三角（alert-triangle）：确认框 warn 级标题图标（警告操作，橙黄档）；danger 级用 icon-no-entry -->
+  <symbol id="icon-alert-triangle" viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></symbol>
   <symbol id="icon-copy-sm" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></symbol>
   <symbol id="icon-trash" viewBox="0 0 24 24"><path d="M3 6h18"></path><path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"></path><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></symbol>
   <!-- 连接（link）：本地开发服务「连接前后端」语义图标，呼应主题【连接】 -->

package/dist/vendored/components/ApiCallPanel.vue

@@ -0,0 +1,115 @@
+<!--
+  接口调用面板：右侧常驻独立面板（由 App 顶栏按钮 / 面板内 ✕ 控制展开收起）。
+  展示 ynet.callJSAPI / postMessage 的调用流水，内容原属调试面板的「接口调用」tab，
+  拆出后调试面板聚焦「绑定数据 / 组件结构 / 卡片来源」，接口流水可常驻可视。
+-->
+<template>
+  <aside class="apipanel">
+    <div class="apipanel__head">
+      <span class="apipanel__title">
+        API调用
+        <span v-if="apiCalls.length" class="debug__count">{{ apiCalls.length }}</span>
+      </span>
+      <span class="apipanel__spacer"></span>
+      <button
+        class="apipanel__btn"
+        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>
+      <button
+        class="apipanel__btn"
+        type="button"
+        title="收起接口调用面板"
+        @click="$emit('close')"
+      >
+        <svg width="15" height="15" 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="apipanel__body">
+      <p v-if="!apiCalls.length" class="debug__empty">暂无接口调用</p>
+      <ul class="debug__list">
+        <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>
+    </div>
+  </aside>
+</template>
+
+<script>
+import ApiPayloadTree from './ApiPayloadTree.vue'
+import { copyText } from '@/runtime/clipboard.js'
+
+export default {
+  name: 'ApiCallPanel',
+  components: { ApiPayloadTree },
+  props: {
+    rt: { type: Object, required: true },
+  },
+  emits: ['close'],
+  data() {
+    return {
+      // 刚复制过数据的条目下标（用于图标变 ✓ 反馈），null=无
+      copiedIndex: null,
+      apiCopyTimer: null,
+    }
+  },
+  computed: {
+    // 依赖 apiRev，使接口调用流水在 pushApiCall / clearApiCalls 后实时刷新
+    // （apiCalls 本身是非响应式数组，模板直接读它不会触发重渲染）
+    //
+    // ⚠️ 必须 slice() 返回**新数组**，不能直接 return 原数组引用：
+    // Vue 3.4+ 引入了「computed 值稳定性」——重算后若新值与旧值 Object.is 相等，
+    // 就不再通知下游 effect。原数组是同一个引用，即使 apiRev 自增触发了重算，
+    // 渲染 effect 也收不到通知，界面纹丝不动。
+    apiCalls() {
+      void this.rt.apiRev
+      return this.rt.apiCalls.slice()
+    },
+  },
+  methods: {
+    /** 清空接口调用流水：调用运行时 clearApiCalls（清空数组 + 自增 apiRev），
+     *  因 apiCalls computed 返回 slice() 新引用，触发实时重渲染 */
+    clearApiLog() {
+      this.rt.clearApiCalls()
+    },
+    /** 复制某条接口调用的「返回数据」（即 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/CardGallery.vue

@@ -56,6 +56,8 @@
             @click="choose(card)"
           >
             <div class="cg-tile__thumb">
+              <!-- 导入标记：仅含 .import-meta.json 侧车的卡（经远端同步导入）显示，悬浮于缩略图右上角 -->
+              <span v-if="card.imported" class="cg-tile__tag" title="导入卡片（含 .import-meta.json 来源信息）">导入</span>
               <img
                 v-if="visibleIds.has(card.id) && !failed.has(card.id)"
                 class="cg-tile__img"