cardbuddy 0.10.0 → 0.11.0

package/dist/vendored/App.vue

@@ -3,7 +3,7 @@
   右侧调试面板。
 -->
 <template>
-  <div class="app" :class="{ 'app--chrome-off': chromeOff }" :style="{ '--preview-width': previewWidth + 'px', '--api-panel-width': apiPanelWidth + 'px' }">
+  <div class="app" :class="{ 'app--chrome-off': chromeOff }" :style="{ '--preview-width': previewWidth + 'px', '--api-panel-width': apiPanelWidth + 'px', '--debug-min': debugMinWidth + 'px' }">
     <header class="app__bar" v-show="!chromeOff">
       <strong class="app__logo">
         <img class="app__logo-icon" :src="logoUrl" alt="" />
@@ -35,6 +35,15 @@
       >
         <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-grid" /></svg>
       </button>
+      <!-- 新增空白卡片：紧邻网格预览的图标按钮；弹窗收 ID（必填、本地重名前置拦截）+ 描述（选填），创建成功切换到新卡 -->
+      <button
+        class="app__btn app__btn--icon"
+        type="button"
+        @click="openNewCard"
+        title="新增空白卡片"
+      >
+        <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-folder-plus" /></svg>
+      </button>
       <div
         ref="validateBadgeEl"
         class="app__badge"
@@ -233,10 +242,30 @@
           </Transition>
         </div>
       </div>
-      <!-- revision 依赖锚点：setData 自增后驱动本组件重渲染 -->
       <span style="display: none">{{ rt.revision }}</span>
     </header>
 
+    <!-- AI 开发助手悬浮入口：右下角圆形按钮（尺寸 / 配色走规范 Token，图标取自 sprite） -->
+    <button
+      class="ai-fab"
+      type="button"
+      :class="{ 'ai-fab--active': aiChatOpen }"
+      :title="aiChatOpen ? 'AI 开发助手（已打开）' : 'AI 开发助手'"
+      :aria-expanded="aiChatOpen ? 'true' : 'false'"
+      data-testid="ai-fab"
+      @click="aiChatOpen = !aiChatOpen"
+    >
+      <svg class="ai-fab__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-sparkles" /></svg>
+    </button>
+
+    <!-- AI 开发助手对话面板：右侧抽屉，宽度可拖（320px ~ 视口 50%，默认 33%），对话记录按卡片落盘 -->
+    <ChatPanel
+      :visible="aiChatOpen"
+      :card-id="selectedId"
+      :card-name="selectedCardName"
+      @close="aiChatOpen = false"
+    />
+
     <!-- 部署态但未配置本地开发服务：顶部提示条（chrome=off 截图模式不显示） -->
     <div v-if="apiBaseResolved === null && !chromeOff" class="app__nosvc-banner">
       <template v-if="devSvcBlockReason === 'disabled'">
@@ -358,7 +387,7 @@
         v-show="!chromeOff"
         class="splitter"
         :class="{ 'is-dragging': dragging }"
-        @mousedown.prevent="startDrag"
+        @pointerdown.prevent="startDrag"
         title="拖拽调整预览区域宽度"
       ></div>
 
@@ -369,7 +398,7 @@
       <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">
+        <div class="workside__cols" ref="colsEl">
           <!-- 拖拽分隔条：置于两栏容器内（定位上下文），只贯穿列区高度，不穿过底部弹出面板与状态栏 -->
           <!-- 中右分隔条：调试面板 | 接口调用面板 接缝，拖动调整右栏宽度。
                约束：中栏最小宽度 ≥ 屏宽 1/3，右栏最小宽度 ≥ 320px（见 startApiDrag） -->
@@ -377,7 +406,7 @@
             v-show="!chromeOff && apiPanelOpen"
             class="splitter splitter--api"
             :class="{ 'is-dragging': apiDragging }"
-            @mousedown.prevent="startApiDrag"
+            @pointerdown.prevent="startApiDrag"
             title="拖拽调整接口调用面板宽度"
           ></div>
           <DebugPanel
@@ -504,6 +533,14 @@
       :selected-id="selectedId"
       @select="onSelect"
       @close="closeGallery"
+      @delete="onGalleryDelete"
+    />
+    <!-- 新增空白卡片弹窗：创建成功后关弹窗 + 刷列表 + 切换到新卡；existing-ids 供 ID 重名前置判定 -->
+    <NewCardDialog
+      :visible="newCardOpen"
+      :existing-ids="cardIds"
+      @close="newCardOpen = false"
+      @created="onNewCardCreated"
     />
     <!-- App 级弱提示：顶栏异步操作（远端保存 / 同步）完成反馈，浮于 App 外壳顶部居中 -->
     <AppToast />
@@ -537,8 +574,10 @@ import RemotePreview from '@/components/RemotePreview.vue'
 import AppToast from '@/components/AppToast.vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import CardGallery from '@/components/CardGallery.vue'
+import NewCardDialog from '@/components/NewCardDialog.vue'
 import ComponentPalette from '@/components/ComponentPalette.vue'
 import Switch from '@/components/Switch.vue'
+import ChatPanel from '@/components/ChatPanel.vue'
 import { showAppToast } from '@/runtime/app-toast.js'
 import { clearAllAlerts } from '@/runtime/alert-card.js'
 import { installJsApiMock, clearDeviceUI } from '@/runtime/jsapi-mock.js'
@@ -563,9 +602,16 @@ const cardRuntime = createCardRuntime({}, adapter)
 // 直接驱动 rt.setRootScope —— 与 DebugPanel「变量 → 配置变量 mock」Raw「应用」同源。生产构建不暴露。
 if (typeof window !== 'undefined' && import.meta.env.DEV) window.__rt = cardRuntime
 
+// 三栏（预览列 | 调试面板 | 接口调用面板）布局约束的单一来源：
+// 拖拽夹取与 computed 都从这里取值，避免「两套口径」在极限位置互相打架导致接缝跳动 / 整行溢出。
+const PREVIEW_MIN = 188 // 预览列硬下限（= 最小机型预设宽）
+const API_MIN = 320 // 接口调用面板常规下限（空间不足时按 apiPanelBounds 优雅退让，不整行溢出）
+const DEBUG_MIN_FLOOR = 200 // 中栏（调试面板）硬下限；软目标为屏宽 1/3
+const API_ABS_MIN = 160 // 极窄窗口下面板的绝对下限，保证不撑破容器
+
 export default {
   name: 'App',
-  components: { RenderTree, DebugPanel, ApiCallPanel, 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, NewCardDialog, ComponentPalette, Switch, ChatPanel },
   provide() {
     return {
       adapter,
@@ -583,7 +629,9 @@ export default {
       appVersion: __APP_VERSION__,
       cardList: [], // 实时从 GET /__cards 拉取，不缓存启动快照
       cardCount: 0,
-      galleryOpen: false, // 卡片网格预览弹窗开关
+      galleryOpen: false,
+      // 新增空白卡片弹窗开关（顶栏图标按钮触发）
+      newCardOpen: false, // 卡片网格预览弹窗开关
       selectedId: '',
       // 外部（IDE / 其他工具）改了当前卡、且平台无未保存改动时，自动重载后顶部短暂提示
       // （非阻塞，区别于有未保存改动时的阻塞确认框）。
@@ -697,15 +745,22 @@ export default {
         { key: 188, value: '188' },
       ],
       stageWidth: typeof window !== 'undefined' ? window.innerWidth : 1280, // 舞台实际宽度（ResizeObserver 实测后更新）
+      colsWidth: 0, // 中右两栏容器（.workside__cols）实测宽度：右栏宽度夹取的单一口径
       stageHeight: typeof window !== 'undefined' ? window.innerHeight - 52 : 748, // 舞台实际高度（contain 缩放的“高度上限”基准）
       dragging: false, // 是否正在拖拽分隔条
       apiDragging: false, // 是否正在拖拽「接口调用」面板分隔条
       _stageObserver: null,
-      _dragMove: null,
-      _dragUp: null,
       // —— 本地开发服务（前后端分离）配置入口 ——
       // devServiceForm：设置面板双向绑定的草稿；启用后前端所有 /__xxx 请求改走该地址。
       devServiceOpen: false,
+      // AI 面板开合跨刷新保持：dev server 重启 / 误刷新后不必重新找入口
+      aiChatOpen: (() => {
+        try {
+          return sessionStorage.getItem('cardbuddy:ai-chat-open') === '1'
+        } catch {
+          return false
+        }
+      })(),
       devServiceForm: loadDevServiceConfig(),
       // apiBaseResolved：当前生效的 API 基址；null 表示部署态未配置（必须用本地服务才能编辑）。
       apiBaseResolved: resolveApiBase(),
@@ -725,6 +780,10 @@ export default {
     currentBg() {
       return this.bgOptions.find((b) => b.key === this.canvasBg) || this.bgOptions[0]
     },
+    /** 本地已有卡片 ID（GET /__cards 实时扫描 src/cards 的结果）：新增空白卡片时做重名前置判定 */
+    cardIds() {
+      return this.cardList.map((c) => c && c.id).filter(Boolean)
+    },
     // 撤销可用：存在可回退的上一版本；重做可用：存在被撤销后的版本
     canUndo() {
       return this.past.length > 0
@@ -825,27 +884,58 @@ export default {
       return ''
     },
     // 预览列宽度（像素）：chromeOff 时占满整屏（截图/真机模式，非“宽度调整”场景）；
-    // 否则使用 _previewWidthPx 并限制在 [188, 可视宽度/2]，最大不得超过画布左侧可视区域的一半
+    // 否则使用 _previewWidthPx 并夹到 previewBounds（拖拽与渲染共用同一口径，杜绝两套夹取打架）
     previewWidth() {
       if (this.chromeOff) return this.stageWidth
-      const total = this.stageWidth || 1
-      const minW = 188 // 最小宽度不得小于 188（预设最小尺寸）
-      const maxW = Math.max(minW, Math.floor(total / 2)) // 最大不得超过可视宽度的一半
-      const w = this._previewWidthPx || minW
-      return Math.max(minW, Math.min(maxW, w))
+      const { min, max } = this.previewBounds
+      const w = this._previewWidthPx || PREVIEW_MIN
+      return Math.max(min, Math.min(max, w))
+    },
+    /** 视口宽（响应式：随 stageWidth / colsWidth 的实测更新一起重算） */
+    viewportWidth() {
+      // 依赖 stageWidth 以便窗口缩放时重算；取值仍用 innerWidth（vw 口径与 CSS 一致）
+      void this.stageWidth
+      return typeof window !== 'undefined' ? window.innerWidth : 1280
+    },
+    /** 中栏软目标宽：屏宽 1/3，且不低于硬下限（下发给 CSS `.debug` 的 min-width） */
+    debugSoftWidth() {
+      return Math.max(DEBUG_MIN_FLOOR, Math.floor(this.viewportWidth / 3))
+    },
+    /** 预览列宽度区间：[188, min(舞台宽/2, 舞台宽 - 右栏下限 - 中栏软目标)]。
+     *  只依赖舞台宽与视口宽（不反向依赖中右两栏实测），杜绝循环夹取。 */
+    previewBounds() {
+      const stage = this.stageWidth || 0
+      const byHalf = Math.floor(stage / 2)
+      const byWorkspace = stage - API_MIN - this.debugSoftWidth
+      return { min: PREVIEW_MIN, max: Math.max(PREVIEW_MIN, Math.min(byHalf, byWorkspace)) }
+    },
+    /** 中栏（调试面板）实际最小宽：软目标（屏宽 1/3）优先，空间不足时退让到硬下限 */
+    debugMinWidth() {
+      const cols = this.colsWidth || Math.max(0, (this.stageWidth || 0) - this.previewWidth)
+      return Math.max(DEBUG_MIN_FLOOR, Math.min(this.debugSoftWidth, Math.floor(cols) - API_MIN))
+    },
+    /** 右栏（接口调用面板）宽度区间：常规 [320, 两栏容器宽 - 中栏最小宽]；
+     *  容器实在放不下 320 时（窄窗口 + 预览列已占位）整体退让到剩余空间，绝不撑破容器
+     *  —— 撑破会让面板被推出视口、分隔条接缝与面板边缘脱节，表现为「拖到极限就跳」。 */
+    apiPanelBounds() {
+      const cols = this.colsWidth || Math.max(0, (this.stageWidth || 0) - this.previewWidth)
+      const max = Math.max(API_ABS_MIN, Math.floor(cols) - this.debugMinWidth)
+      return { min: Math.min(API_MIN, max), max }
     },
     // 画布实际宽度（列宽，整数）：canvas-bar__size 实时显示用，拖拽分隔条时随之变化
     canvasW() {
       return Math.round(this.previewWidth || 375)
     },
-    // 右侧「接口调用」面板宽度（像素）：限制在 [320, 舞台宽度 - 预览列宽 - 中栏最小宽(屏宽 1/3)]，
-    // 保证中栏（调试面板）最小宽度不小于三分之一屏幕宽度、右栏不小于 320px
+    /** 当前卡片名（AI 开发助手头部展示；列表未加载完时回落 id） */
+    selectedCardName() {
+      const hit = this.cardList.find((c) => c.id === this.selectedId)
+      return (hit && hit.name) || this.selectedId || ''
+    },
+    // 右侧「接口调用」面板宽度（像素）：夹到 apiPanelBounds，保证中栏不小于屏宽 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 { min, max } = this.apiPanelBounds
       const w = this._apiPanelWidthPx || 360
-      return Math.max(minW, Math.min(maxW, w))
+      return Math.max(min, Math.min(max, w))
     },
     // 缩放外框占满整列（宽高交由 CSS flex 填满；画布不再做 transform 缩放，直接按实际尺寸布局）
     frameStyle() {
@@ -861,6 +951,13 @@ export default {
         clearHoverEl()
       }
     },
+    aiChatOpen(val) {
+      try {
+        sessionStorage.setItem('cardbuddy:ai-chat-open', val ? '1' : '0')
+      } catch {
+        /* sessionStorage 不可用时忽略 */
+      }
+    },
     // 主题切换：把 'dark' / 'light' 写到 <html data-theme>，驱动 CSS 变量整体换肤
     theme(val) {
       document.documentElement.dataset.theme = val
@@ -877,8 +974,6 @@ export default {
   beforeUnmount() {
     if (this.viewportObserver) this.viewportObserver.disconnect()
     if (this._stageObserver) this._stageObserver.disconnect()
-    if (this._dragMove) document.removeEventListener('mousemove', this._dragMove)
-    if (this._dragUp) document.removeEventListener('mouseup', this._dragUp)
     if (this.saveTimer) clearTimeout(this.saveTimer)
     if (this.syncTimer) clearTimeout(this.syncTimer)
     if (this.saveRemoteTimer) clearTimeout(this.saveRemoteTimer)
@@ -897,11 +992,17 @@ export default {
     this.loadApiPanelWidth()
     this._stageObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
+        // 舞台与两栏容器分别实测：右栏夹取要用 colsWidth（不含预览列），不能拿舞台宽反推
+        if (entry.target === this.$refs.colsEl) {
+          this.colsWidth = Math.round(entry.contentRect.width)
+          continue
+        }
         this.stageWidth = Math.round(entry.contentRect.width)
         this.stageHeight = Math.round(entry.contentRect.height)
       }
     })
     if (this.$refs.stageEl) this._stageObserver.observe(this.$refs.stageEl)
+    if (this.$refs.colsEl) this._stageObserver.observe(this.$refs.colsEl)
     // 全局键盘快捷键：复制/粘贴/副本/删除/撤销/重做/取消选中（见 onKeydown）
     window.addEventListener('keydown', this.onKeydown)
   },
@@ -1023,32 +1124,84 @@ export default {
       showAppToast('本地开发服务配置已保存', 'ok')
       this.fetchCardList()
     },
-    // —— 预览区宽度调节 ——
-    // 拖拽分隔条：拖动改变预览列宽度（直接写入 _previewWidthPx 像素，previewWidth/canvasW 自动联动），松手持久化
-    startDrag() {
-      if (this.chromeOff) return
-      this.dragging = true
-      document.body.style.cursor = 'col-resize'
-      document.body.style.userSelect = 'none'
-      const stage = this.$refs.stageEl
-      this._dragMove = (ev) => {
-        const rect = stage.getBoundingClientRect()
-        const minW = 188 // 最小宽度不得小于 188
-        const maxW = Math.max(minW, Math.floor(rect.width / 2)) // 最大不得超过可视宽度的一半
-        let w = ev.clientX - rect.left
-        w = Math.max(minW, Math.min(maxW, w))
-        this._previewWidthPx = w
+    // —— 列宽拖拽（左：预览列 / 右：接口调用面板）——
+    /**
+     * 分隔条拖拽统一入口：Pointer Events + 指针捕获。
+     * 曾经左条绑 mousedown、处理函数却按 pointer 写（ev.pointerId 为 undefined → 捕获失败，
+     * pointermove 只在 6px 命中区内触发），表现为「左侧分隔条拖不动」；两条统一走这里。
+     * 捕获后即使松手点在视口外，pointerup / pointercancel 仍回送本元素，不会残留拖拽态。
+     * @param {PointerEvent} ev
+     * @param {(e: PointerEvent) => void} onMove 每次移动的夹取写入
+     * @param {() => void} onEnd 收尾（清光标 / 持久化）
+     */
+    beginColumnDrag(ev, onMove, onEnd) {
+      const el = ev && ev.currentTarget
+      if (!el) return
+      const pointerId = ev.pointerId
+      try {
+        el.setPointerCapture(pointerId)
+      } catch {
+        /* 不支持捕获时退化为元素级监听 */
       }
-      this._dragUp = () => {
-        this.dragging = false
+      const finish = () => {
+        el.removeEventListener('pointermove', onMove)
+        el.removeEventListener('pointerup', finish)
+        el.removeEventListener('pointercancel', finish)
+        window.removeEventListener('blur', finish)
+        try {
+          if (el.hasPointerCapture?.(pointerId)) el.releasePointerCapture(pointerId)
+        } catch {
+          /* 已释放 */
+        }
         document.body.style.cursor = ''
         document.body.style.userSelect = ''
-        document.removeEventListener('mousemove', this._dragMove)
-        document.removeEventListener('mouseup', this._dragUp)
-        this.savePreviewWidth()
+        onEnd()
       }
-      document.addEventListener('mousemove', this._dragMove)
-      document.addEventListener('mouseup', this._dragUp)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      el.addEventListener('pointermove', onMove)
+      el.addEventListener('pointerup', finish)
+      el.addEventListener('pointercancel', finish)
+      window.addEventListener('blur', finish) // 窗口失焦兜底：切走 / 最小化不卡死拖拽态
+    },
+    // 左分隔条：拖动改变预览列宽度（写像素，previewWidth / canvasW 自动联动），松手持久化
+    startDrag(ev) {
+      if (this.chromeOff) return
+      const stage = this.$refs.stageEl
+      if (!stage) return
+      const baseLeft = stage.getBoundingClientRect().left
+      this.dragging = true
+      this.beginColumnDrag(
+        ev,
+        (e) => {
+          const { min, max } = this.previewBounds
+          this._previewWidthPx = Math.max(min, Math.min(max, Math.round(e.clientX - baseLeft)))
+        },
+        () => {
+          this.dragging = false
+          this.savePreviewWidth()
+        }
+      )
+    },
+    // 右分隔条：拖动改变「接口调用」面板宽度（向左加宽 / 向右收窄），松手持久化。
+    // 基准取两栏容器右缘（= 面板右缘），夹取用 apiPanelBounds，与渲染口径完全一致 → 极限处不再跳动
+    startApiDrag(ev) {
+      if (this.chromeOff || !this.apiPanelOpen) return
+      const cols = this.$refs.colsEl
+      if (!cols) return
+      const baseRight = cols.getBoundingClientRect().right
+      this.apiDragging = true
+      this.beginColumnDrag(
+        ev,
+        (e) => {
+          const { min, max } = this.apiPanelBounds
+          this._apiPanelWidthPx = Math.max(min, Math.min(max, Math.round(baseRight - e.clientX)))
+        },
+        () => {
+          this.apiDragging = false
+          this.saveApiPanelWidth()
+        }
+      )
     },
     // 读取上次保存的预览列宽度（像素）；首次打开（无记录）时保持默认 372px
     loadPreviewWidth() {
@@ -1069,40 +1222,10 @@ export default {
     // 预设尺寸切换：375 / 188 一键设定预览列宽度；高度随列高动态保持一致（由 CSS flex 自动填充）
     setPresetWidth(w) {
       if (this.chromeOff) return
-      const total = this.stageWidth || 1
-      const minW = 188
-      const maxW = Math.max(minW, Math.floor(total / 2)) // 最大不得超过可视宽度的一半
-      this._previewWidthPx = Math.max(minW, Math.min(maxW, w))
+      const { min, max } = this.previewBounds
+      this._previewWidthPx = Math.max(min, Math.min(max, 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 {
@@ -1125,20 +1248,35 @@ export default {
     },
     onSelect(id) {
       this.loadingCard = true
+      // 乐观置位：下拉立刻跟手。持久化交给 loadCard —— 载入成功才记，
+      // 避免把一张打不开的卡记成「上次选中」，下次进页面直接白屏
+      this.selectedId = id
+      this.loadCard(id, { clearAll: true })
+    },
+    /**
+     * 置为「当前卡」并持久化（下次打开页面自动恢复，沿用 cardbuddy: 前缀约定）。
+     * 顶栏下拉、网格高亮、校验徽标、RenderTree 的 key、导入元数据的过期判定全读 selectedId，
+     * 所以由 loadCard 统一置位：任何调用点（下拉选中、网格点卡、新增空白卡、删除后切下一张）
+     * 都不会再出现「画布切过去了、下拉还停在旧卡」的错位。
+     */
+    selectCard(id) {
       this.selectedId = id
-      // 持久化当前选中卡片，下次打开页面自动恢复（沿用 cardbuddy: 前缀约定）
       try {
         localStorage.setItem('cardbuddy:selected-card', id)
       } catch (e) {
         /* localStorage 不可用时忽略 */
       }
-      this.loadCard(id, { clearAll: true })
     },
     /** 打开卡片网格预览弹窗 */
     openGallery() {
       if (!this.cardList.length) return
       this.galleryOpen = true
     },
+    /** 打开「新增空白卡片」弹窗：先刷一次列表，重名判定才拿得到最新本地卡片（别的窗口 / 同步远程可能刚建过卡） */
+    openNewCard() {
+      this.newCardOpen = true
+      this.fetchCardList()
+    },
     /** 关闭卡片网格预览弹窗 */
     closeGallery() {
       this.galleryOpen = false
@@ -1327,6 +1465,9 @@ export default {
         this.rt.pushError('loadCard', 'schema 读取失败')
         return
       }
+      // 载入成功即认定这张卡为当前卡：必须在 fetchImportMeta / refreshValidateBadge 之前，
+      // 二者都以 selectedId 作「是否已切卡」的判据，晚置位会把新卡的结果当过期丢掉
+      this.selectCard(id)
       // 切换卡片：清全部错误；刷新/重建预览：只清绑定错误，保留事件错误
       if (opts.clearAll) {
         this.rt.clearErrors()
@@ -1740,6 +1881,16 @@ export default {
       clearHoverEl()
       this.scheduleCommit()
     },
+    /** 页面是否存在非空文本选区：有则视为「文本复制/粘贴」意图，交还原生行为 */
+    hasTextSelection() {
+      if (typeof window === 'undefined' || !window.getSelection) return false
+      const sel = window.getSelection()
+      return !!sel && !sel.isCollapsed && sel.toString().trim() !== ''
+    },
+    /** 是否存在可用于节点操作的选区（选中了非根节点）：节点复制/粘贴/副本的前提 */
+    hasNodeSelection() {
+      return !!this.selectedNodeId && this.selectedNodeId !== '_root'
+    },
     /** 判断按键事件焦点是否在可编辑元素内（输入框/文本域/可选文本），此时不劫持快捷键 */
     isEditableTarget(e) {
       const t = e.target
@@ -1755,6 +1906,11 @@ export default {
      *  Ctrl/⌘+Z 撤销 · Ctrl/⌘+Shift+Z / Ctrl+Y 重做 · Esc 取消选中。
      * 焦点在输入框/JSON 编辑器等可编辑元素内时，仅放行 Esc，其余交还原生行为
      * （避免误删节点或劫持文本撤销/复制）。
+     * 节点复制/粘贴与系统文本复制/粘贴共存判据（按优先级）：
+     *  1) 焦点可编辑 → 一律原生（文本撤销/复制/粘贴）；
+     *  2) 存在非空文本选区 → 一律原生（用户意图是文本）；
+     *  3) 节点类操作还要求已选中非根节点（粘贴另要求节点剪贴板非空），
+     *     否则不 preventDefault，把按键还给浏览器（如 ⌘D 书签）。
      */
     onKeydown(e) {
       if (this.chromeOff || !this.preview) return
@@ -1764,18 +1920,21 @@ export default {
 
       if (ctrl && (k === 'c' || k === 'C')) {
         if (editable) return
+        if (this.hasTextSelection() || !this.hasNodeSelection()) return
         this.copySelectedNode()
         e.preventDefault()
         return
       }
       if (ctrl && (k === 'v' || k === 'V')) {
         if (editable) return
+        if (this.hasTextSelection() || !this.hasNodeSelection() || !getClipboardNode()) return
         this.pasteNode()
         e.preventDefault()
         return
       }
       if (ctrl && (k === 'd' || k === 'D')) {
         if (editable) return
+        if (this.hasTextSelection() || !this.hasNodeSelection()) return
         this.duplicateNode()
         e.preventDefault()
         return
@@ -2569,6 +2728,37 @@ export default {
         console.error('[加载卡片列表失败]', e)
       }
     },
+    /**
+     * 网格预览删除卡片：格子删除钮 → 警告确认 → 这里真删（DELETE /__card/<id> 递归删本地目录）。
+     * 删完刷列表；若删的正是当前卡，切到剩余首卡，避免工作台指向已不存在的目录（保存会 404）。
+     */
+    async onGalleryDelete(id) {
+      try {
+        const res = await apiFetch(`/__card/${encodeURIComponent(id)}`, { method: 'DELETE' })
+        const r = await res.json().catch(() => null)
+        if (!res.ok) throw new Error((r && (r.message || r.error)) || `HTTP ${res.status}`)
+        showAppToast(`已删除本地卡片 ${id}`, 'ok')
+        await this.fetchCardList()
+        if (this.selectedId === id) {
+          const next = this.cardList[0]
+          if (next) await this.loadCard(next.id)
+          else {
+            this.selectedId = ''
+            this.currentSchema = null
+            this.preview = null
+          }
+        }
+      } catch (e) {
+        showAppToast(`删除卡片失败：${e.message}`, 'err')
+      }
+    },
+    /** 新增空白卡片创建成功：关弹窗 → 刷列表 → 切换到新卡（空白卡无封面，网格显示占位图） */
+    async onNewCardCreated(id) {
+      this.newCardOpen = false
+      showAppToast(`已创建空白卡片 ${id}`, 'ok')
+      await this.fetchCardList()
+      await this.loadCard(id)
+    },
     /** 刷新当前卡片：从磁盘重新读取 schema/data 并强制重挂载 */
     async onRefresh() {
       const id = this.selectedId

package/dist/vendored/api.js

@@ -3,7 +3,7 @@
  *
  * 设计目标（前后端分离方案 Phase 2）：
  * - 开发期（npm run dev，由 tools/dev.mjs 同起 cardbuddy）：apiBase 默认
- *   http://127.0.0.1:<FINMALL_CARD_PORT>（.env.finmall，默认 8787），与部署态一致。
+ *   http://127.0.0.1:<FINMALL_CARD_PORT>（.env.cb，默认 8787），与部署态一致。
  *   若页面不是经回环地址打开（局域网 IP / 其它本机 IP），则退化为同源 ''，
  *   由 Vite dev server 代理到 8787，避开浏览器私有网络访问（PNA）拦截。
  * - 部署态（vite build 静态产物）：默认读 localStorage 的「本地开发服务」配置；
@@ -28,8 +28,8 @@ const PREVIEW_API_BASE =
     ? window.__CARD_DEV_PREVIEW_BASE__ || window.__CARD_DEV_OFFLINE_BASE__ || ''
     : ''
 
-// 本地开发服务默认端口：与 .env.finmall 的 FINMALL_CARD_PORT 保持一致（默认 8787）。
-// 开发期 .env.finmall 经 vite envPrefix 暴露为 import.meta.env.FINMALL_CARD_PORT，
+// 本地开发服务默认端口：与 .env.cb 的 FINMALL_CARD_PORT 保持一致（默认 8787）。
+// 开发期 .env.cb 经 vite envPrefix 暴露为 import.meta.env.FINMALL_CARD_PORT，
 // 前端据此连接；该值同时由启动器注入 cardbuddy 子进程（DSL_DEV_PORT）使其监听同一端口。
 const CARD_DEV_PORT = Number(import.meta.env.FINMALL_CARD_PORT || 8787)
 
@@ -85,7 +85,7 @@ export function saveDevServiceConfig(cfg) {
  * - 显式覆盖（VITE_API_BASE，手动 / 部署态注入）→ 该 URL
  * - 用户已在设置启用并填了地址 → 该地址（去尾斜杠）
  * - Vite dev server（import.meta.env.DEV 且无覆盖）→ 默认本地开发服务
- *   http://127.0.0.1:<FINMALL_CARD_PORT>（.env.finmall，默认 8787）
+ *   http://127.0.0.1:<FINMALL_CARD_PORT>（.env.cb，默认 8787）
  *   （前后端分离：Vite 不再托管卡片后端，改由 tools/dev.mjs 同起的 cardbuddy 提供）
  *   例外：页面经非回环主机名打开时返回 ''（同源），改由 Vite dev server 代理到 8787，
  *   绕开浏览器私有网络访问（PNA）拦截，详见 isNonLoopbackDevHost 注释

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

@@ -8,6 +8,7 @@
   <symbol id="icon-save" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></symbol>
   <symbol id="icon-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="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-loading" viewBox="0 0 24 24"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></symbol>
+  <symbol id="icon-activity" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></symbol>
   <symbol id="icon-cloud-check" viewBox="0 0 24 24"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path><polyline points="9 15 11 17 14 13"></polyline></symbol>
   <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>
@@ -27,6 +28,33 @@
   <!-- 连接（link）：本地开发服务「连接前后端」语义图标，呼应主题【连接】 -->
   <symbol id="icon-link" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></symbol>
 
+  <!-- AI 开发助手（sparkles）：悬浮入口 / 面板标题 / 思考态，与主题「智能辅助」呼应 -->
+  <symbol id="icon-sparkles" viewBox="0 0 24 24"><path d="M12 3l1.9 4.9L18.8 9.8l-4.9 1.9L12 16.6l-1.9-4.9L5.2 9.8l4.9-1.9L12 3z"></path><path d="M18 15.5l.9 2.2 2.2.9-2.2.9-.9 2.2-.9-2.2-2.2-.9 2.2-.9.9-2.2z"></path></symbol>
+  <!-- 终止生成（实心方块）：流式进行中的「停止」按钮 -->
+  <symbol id="icon-stop" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor" stroke="none"></rect></symbol>
+  <!-- 发送（arrow-up）：输入框发送态 -->
+  <symbol id="icon-send" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></symbol>
+  <!-- 附件（paperclip）：本地文件 / 图片挂载入口 -->
+  <symbol id="icon-paperclip" viewBox="0 0 24 24"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></symbol>
+  <!-- 文件夹加号：挂载本地文件夹（如 Sketch MeaXure 标注导出目录） -->
+  <symbol id="icon-folder-plus" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></symbol>
+  <!-- 图片（image）：图片类附件缩略占位 -->
+  <symbol id="icon-image" 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><polyline points="21 15 16 10 5 21"></polyline></symbol>
+  <!-- 文件（file-text）：文本类附件占位 -->
+  <symbol id="icon-file-text" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></symbol>
+  <!-- 关闭（x）：面板 / 弹层关闭，替代文本 ✕ -->
+  <symbol id="icon-x" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></symbol>
+  <!-- 工具调用（wrench）：assistant 消息里的工具执行行 -->
+  <symbol id="icon-eye" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></symbol>
+  <symbol id="icon-eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"></path><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"></path><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></symbol>
+  <symbol id="icon-wrench" viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></symbol>
+  <!-- 回到底部（arrow-down）：滚动脱离底部时的悬浮按钮 -->
+  <symbol id="icon-arrow-down" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></symbol>
+  <!-- 帮助（help-circle）：表单字段的「?」详情入口，点开看说明浮层 -->
+  <symbol id="icon-help" viewBox="0 0 24 24"><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></symbol>
+  <!-- 展开箭头（chevron-right）：折叠行展开态，CSS 旋转 90° 即为收起态 -->
+  <symbol id="icon-chevron-right" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"></polyline></symbol>
+
   <!-- ===== 16x16 小图标（下拉 / 卡片选择 / 设置器） ===== -->
   <symbol id="icon-chevron" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
   <symbol id="icon-check" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></symbol>