cardbuddy 0.6.0 → 0.8.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"
@@ -306,7 +328,9 @@
         </div>
       </div>
 
-      <!-- 拖拽分隔条：位于预览列与操作面板之间，拖动调整预览宽度（手机自动缩放填充） -->
+
+      <!-- 左分隔条：预览列 | 工作区 接缝。底面板 / 状态栏的左缘即此缝（随预览宽度联动），
+           故定位在 .app__stage 通到底部，全程可拖；右分隔条才收进两栏容器内。 -->
       <div
         v-show="!chromeOff"
         class="splitter"
@@ -315,33 +339,61 @@
         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"
-      />
+      <!-- 中右工作区：上为「调试面板 + 接口调用面板」两栏，下为贯穿两栏的共同状态栏。
+           状态栏与底部弹出面板（运行态 / 事件 / 绑定错误）均由 DebugPanel 内 Teleport 注入
+           #app-workside-bar / #app-workside-panels，宽度贯穿中右两栏；Teleport 目标须在 DOM 中
+           先于面板挂载，故两个空容器写在前面，以 flex order 视觉置底。 -->
+      <div class="workside" v-show="!chromeOff">
+        <div id="app-workside-bar" class="workside__bar"></div>
+        <div id="app-workside-panels" class="workside__panels"></div>
+        <div class="workside__cols">
+          <!-- 拖拽分隔条：置于两栏容器内（定位上下文），只贯穿列区高度，不穿过底部弹出面板与状态栏 -->
+          <!-- 中右分隔条：调试面板 | 接口调用面板 接缝，拖动调整右栏宽度。
+               约束：中栏最小宽度 ≥ 屏宽 1/3，右栏最小宽度 ≥ 320px（见 startApiDrag） -->
+          <div
+            v-show="!chromeOff && apiPanelOpen"
+            class="splitter splitter--api"
+            :class="{ 'is-dragging': apiDragging }"
+            @mousedown.prevent="startApiDrag"
+            title="拖拽调整接口调用面板宽度"
+          ></div>
+          <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 +465,7 @@
       :message="confirm.message"
       :confirm-text="confirm.confirmText"
       :cancel-text="confirm.cancelText"
-      :danger="confirm.danger"
+      :severity="confirm.severity"
       @confirm="onConfirmDialog"
       @cancel="onCancelDialog"
     />
@@ -444,6 +496,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 +535,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 +589,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 +621,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 +657,7 @@ export default {
       ],
       // —— 预览区宽度可调（拖拽分隔条 / 预设尺寸，画布按实际像素宽度布局，无 transform 缩放）——
       _previewWidthPx: 372, // 预览列宽度（像素，持久化到 localStorage）；第一次打开未主动设置时默认 372px
+      _apiPanelWidthPx: 360, // 右侧「接口调用」面板宽度（像素，持久化到 localStorage）；默认 360px
       presetSizes: [ // 预设尺寸下拉选项（仅宽度；高度随列高动态一致）
         { key: 375, value: '375' },
         { key: 430, value: '430' },
@@ -607,6 +666,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 +805,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 +832,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 +861,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 +887,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 +1041,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 +1149,10 @@ export default {
         /* localStorage 不可用时忽略 */
       }
     },
+    /** 展开/收起右侧常驻「接口调用」面板（默认展开）；持久化由 apiPanelOpen 监听器统一处理 */
+    toggleApiPanel() {
+      this.apiPanelOpen = !this.apiPanelOpen
+    },
     /**
      * 整卡校验徽标（Q3：仅 ok/error，不展开 bindingErrors 明细）。
      * 调 /__validate（契约硬校验）与 /__render-status（结构合法 + 渲染不抛错）两个既有端点，
@@ -2010,6 +2143,7 @@ export default {
           title: '全量同步',
           message: '即将从远端 FinMall 拉取完整卡片列表，并逐张覆盖本地同名卡片。本地独有卡片会保留，但被覆盖卡片的未保存改动将丢失，且无法撤销。是否继续？',
           confirmText: '继续同步',
+          severity: 'warn',
           onConfirm: () => this.syncRemote(),
         })
         return
@@ -2022,7 +2156,7 @@ export default {
         onConfirm: () => this.syncSelected(),
       })
     },
-    /** 「远端」分组菜单项：保存到远端 / 远端预览（保存到远端先二次确认） */
+    /** 「远端」分组菜单项：版本推送 / 在线预览 / 切图上传（写覆盖类操作先二次确认） */
     chooseRsave(target) {
       if (target === 'save') {
         if (!this.preview || !this.selectedId || this.savingRemote || !this.hasCardSource) return
@@ -2030,23 +2164,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 +2366,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 +2533,6 @@ export default {
         message: `卡片「${name}」的 schema / data 在编辑器外发生了变更（例如 IDE 或其他工具覆盖了文件）。\n当前编辑器存在未保存的改动，是否放弃本地未保存改动并重新载入磁盘版本？`,
         confirmText: '重新载入',
         cancelText: '保留我的改动',
-        danger: false,
         onConfirm: () => this.loadCard(id),
       })
     },