cardbuddy 0.6.0 → 0.8.0

package/dist/vendored/api.js

@@ -4,6 +4,8 @@
  * 设计目标（前后端分离方案 Phase 2）：
  * - 开发期（npm run dev，由 tools/dev.mjs 同起 cardbuddy）：apiBase 默认
  *   http://127.0.0.1:<FINMALL_CARD_PORT>（.env.finmall，默认 8787），与部署态一致。
+ *   若页面不是经回环地址打开（局域网 IP / 其它本机 IP），则退化为同源 ''，
+ *   由 Vite dev server 代理到 8787，避开浏览器私有网络访问（PNA）拦截。
  * - 部署态（vite build 静态产物）：默认读 localStorage 的「本地开发服务」配置；
  *   未配置时 apiBase = null，调用方据此提示「请先配置本地开发服务」。
  * - 本地开发服务（cardbuddy，默认 http://127.0.0.1:8787）经反射 CORS 放行任意
@@ -37,6 +39,23 @@ const DEFAULT_CONFIG = {
   token: '',
 }
 
+// 页面是否经「非回环主机名」打开（Vite host:true 会额外打印局域网 IP / 其它本机地址，
+// 例如 http://192.168.x.x:5180、http://2.0.0.1:5180）。此时浏览器把页面归为
+// public/private 地址空间，而 cardbuddy 只绑 127.0.0.1（loopback），Chrome 的私有网络
+// 访问（PNA）规则会以「The request client is not a secure context and the resource is in
+// more-private address space `loopback`」直接拦掉 fetch / EventSource（net::ERR_FAILED），
+// 表现为「本地开发服务已断开」。开发期改走同源（''）：请求打到页面自己的 host，
+// 由 vite.config.mjs 的 server.proxy 在 Node 侧转发到 127.0.0.1:<FINMALL_CARD_PORT>
+// —— 服务端转发不受 CORS / PNA 约束。回环访问（localhost / 127.0.0.1）不受影响，
+// 仍直连 8787 跨源链路，与部署态一致。
+const LOOPBACK_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]', '::1'])
+function isNonLoopbackDevHost() {
+  if (typeof window === 'undefined' || !window.location) return false
+  const { protocol, hostname } = window.location
+  if (protocol !== 'http:' && protocol !== 'https:') return false
+  return !LOOPBACK_HOSTS.has(hostname)
+}
+
 export function loadDevServiceConfig() {
   try {
     const raw = localStorage.getItem(LS_KEY)
@@ -68,6 +87,8 @@ export function saveDevServiceConfig(cfg) {
  * - Vite dev server（import.meta.env.DEV 且无覆盖）→ 默认本地开发服务
  *   http://127.0.0.1:<FINMALL_CARD_PORT>（.env.finmall，默认 8787）
  *   （前后端分离：Vite 不再托管卡片后端，改由 tools/dev.mjs 同起的 cardbuddy 提供）
+ *   例外：页面经非回环主机名打开时返回 ''（同源），改由 Vite dev server 代理到 8787，
+ *   绕开浏览器私有网络访问（PNA）拦截，详见 isNonLoopbackDevHost 注释
  * - 部署态静态产物且未配置 → null（调用方需提示配置）
  */
 export function resolveApiBase() {
@@ -76,7 +97,9 @@ export function resolveApiBase() {
   if (override) return String(override).replace(/\/+$/, '')
   const cfg = loadDevServiceConfig()
   if (cfg.enabled && cfg.baseUrl) return cfg.baseUrl.replace(/\/+$/, '')
-  if (import.meta.env && import.meta.env.DEV) return DEFAULT_CONFIG.baseUrl
+  if (import.meta.env && import.meta.env.DEV) {
+    return isNonLoopbackDevHost() ? '' : DEFAULT_CONFIG.baseUrl
+  }
   return null
 }
 
@@ -104,39 +127,86 @@ export async function apiFetch(path, opts = {}) {
  * @param {(state:'connecting'|'open'|'closed')=>void} [onState] 连接态变化回调，
  *   用于驱动顶栏「连接」图标实时反映服务端运行态（SSE readyState / Vite HMR ws 生命周期）。
  */
-export function subscribeCardsChanged(cb, onState) {
-  const base = resolveApiBase()
-  const emit = (s) => { if (typeof onState === 'function') onState(s) }
-  if (base) {
-    // 本地服务：SSE（浏览器原生自动重连）
-    const es = new EventSource(base + '/__events')
-    const handler = (e) => {
-      try {
-        cb(e.data ? JSON.parse(e.data) : {})
-      } catch (_) {
-        cb({})
+/**
+ * 通用 SSE 订阅工厂：监听 /__events 上的一组事件名，返回取消订阅函数。
+ * base === ''（开发期同源代理）同样走 SSE：请求相对当前页面 host，由 Vite 转发到 8787，
+ * 连接态因此能真实反映 cardbuddy 运行态。
+ * @param {string[]} events 事件名列表
+ * @param {{ hmrEvents?: string[] }} [opts] hmrEvents：base 为 null（部署态未配置）时
+ *   回退到 Vite HMR 通道的事件名（仅 cards-changed 仍有该历史通道）。
+ */
+function makeSseSubscriber(events, { hmrEvents = [] } = {}) {
+  return function subscribe(cb, onState) {
+    const base = resolveApiBase()
+    const emit = (s) => { if (typeof onState === 'function') onState(s) }
+    if (base !== null) {
+      // 本地服务 / 同源代理：SSE（浏览器原生自动重连）
+      const es = new EventSource(base + '/__events')
+      const handler = (e) => {
+        try {
+          cb(e.data ? JSON.parse(e.data) : {})
+        } catch (_) {
+          cb({})
+        }
       }
+      for (const name of events) es.addEventListener(name, handler)
+      es.onopen = () => emit('open')
+      es.onerror = () => {
+        // 断链时 onerror 触发，浏览器会自动重连：
+        // readyState===0(CONNECTING) 表示正在重连；===2(CLOSED) 表示已彻底关闭（如显式 close）。
+        emit(es.readyState === 2 ? 'closed' : 'connecting')
+      }
+      emit('connecting') // 刚创建即处于 CONNECTING，先置为「连接中」
+      return () => es.close()
     }
-    es.addEventListener('cards-changed', handler)
-    es.onopen = () => emit('open')
-    es.onerror = () => {
-      // 断链时 onerror 触发，浏览器会自动重连：
-      // readyState===0(CONNECTING) 表示正在重连；===2(CLOSED) 表示已彻底关闭（如显式 close）。
-      emit(es.readyState === 2 ? 'closed' : 'connecting')
-    }
-    emit('connecting') // 刚创建即处于 CONNECTING，先置为「连接中」
-    return () => es.close()
-  }
-  // 同源 dev server：沿用 Vite HMR（底层 WebSocket，同样具备连接态）
-  if (import.meta.hot) {
-    import.meta.hot.on('cards-changed', cb)
-    // 页面由同源 dev server 提供，初始即视为已连接；ws 断开 / 重连时更新状态
-    import.meta.hot.on('vite:ws:connect', () => emit('open'))
-    import.meta.hot.on('vite:ws:disconnect', () => emit('connecting'))
-    emit('open')
-    return () => {
-      /* HMR 无显式 off，noop */
+    // 同源 dev server：沿用 Vite HMR（底层 WebSocket，同样具备连接态）
+    if (import.meta.hot && hmrEvents.length) {
+      for (const name of hmrEvents) import.meta.hot.on(name, cb)
+      // 页面由同源 dev server 提供，初始即视为已连接；ws 断开 / 重连时更新状态
+      import.meta.hot.on('vite:ws:connect', () => emit('open'))
+      import.meta.hot.on('vite:ws:disconnect', () => emit('connecting'))
+      emit('open')
+      return () => {
+        /* HMR 无显式 off，noop */
+      }
     }
+    return () => {}
   }
-  return () => {}
+}
+
+/** 订阅磁盘变更推送（cards-changed）。 */
+export const subscribeCardsChanged = makeSseSubscriber(['cards-changed'], { hmrEvents: ['cards-changed'] })
+
+/** 订阅外部编辑器代码桥事件（code-bridge-changed / code-bridge-closed）。 */
+export const subscribeCodeBridge = makeSseSubscriber(['code-bridge-changed', 'code-bridge-closed'])
+
+/**
+ * 代码桥 REST 封装（端点见 server/core/codeBridge.js）：
+ * open 建立会话并拉起编辑器；fetch 拉取外部保存后的最新代码；
+ * heartbeat 维持会话（TTL 兜底清理）；close 结束会话并删除临时文件。
+ */
+export async function codeBridgeOpen(code, label = '') {
+  const res = await apiFetch('/__code-bridge', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ code, label }),
+  })
+  if (!res.ok) throw new Error(`code-bridge open failed: ${res.status}`)
+  return res.json()
+}
+
+export async function codeBridgeFetch(id) {
+  const res = await apiFetch(`/__code-bridge/${id}`)
+  if (!res.ok) throw new Error(`code-bridge fetch failed: ${res.status}`)
+  return res.json()
+}
+
+export async function codeBridgeHeartbeat(id) {
+  const res = await apiFetch(`/__code-bridge/${id}/heartbeat`, { method: 'POST' })
+  return res.ok
+}
+
+export async function codeBridgeClose(id) {
+  const res = await apiFetch(`/__code-bridge/${id}`, { method: 'DELETE' })
+  return res.ok
 }

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,127 @@
+<!--
+  接口调用面板：右侧常驻独立面板（由 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">
+      <!-- 空状态占位：虚线圆形徽章 + 插头图标（与全局 24 网格线性图标同语言）+ 文案 + 弱提示 -->
+      <div v-if="!apiCalls.length" class="empty-state">
+        <span class="empty-state__badge" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 7V3" />
+            <path d="M15 7V3" />
+            <path d="M6 7h12v4a6 6 0 0 1-12 0V7z" />
+            <path d="M12 17v4" />
+          </svg>
+        </span>
+        <p class="debug__empty">暂无API调用</p>
+        <p class="empty-state__hint">卡片事件触发 ynet.callJSAPI / postMessage 后，调用流水会实时显示在这里</p>
+      </div>
+      <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/ApiPayloadTree.vue

@@ -15,7 +15,26 @@
     </div>
 
     <template v-else>
-      <div class="apt__list">
+      <!-- 日志场景（rootCollapsed）：根对象/数组先收成一行摘要、点击展开（Chrome 控制台风格），
+           避免每个实参默认逐键占行稀释日志密度；接口调用面板不传该 prop，行为不变 -->
+      <div
+        v-if="rootCollapsed && isRoot"
+        class="apt__branch apt__branch--root"
+        @click="rootOpen = !rootOpen"
+      >
+        <span class="apt__caret" :class="{ 'apt__caret--open': rootOpen }">▶</span>
+        <span class="jt__bracket">{{ isArrayRoot ? '[' : '{' }}</span>
+        <span v-if="!rootOpen" class="jt__preview">{{ preview(value) }}</span>
+        <template v-else>
+          <span class="jt__count">{{ rootCount }} {{ isArrayRoot ? '项' : '键' }}</span>
+        </template>
+        <span v-if="!rootOpen" class="jt__bracket">{{ isArrayRoot ? ']' : '}' }}</span>
+      </div>
+      <div
+        v-show="!(rootCollapsed && isRoot) || rootOpen"
+        class="apt__list"
+        :class="{ 'apt__list--nested': rootCollapsed && isRoot && rootOpen }"
+      >
         <div v-for="(entry, i) in entries" :key="i" class="apt__node">
           <!-- 复合类型且未超最大深度：可折叠分支 -->
           <div v-if="canExpand(entry)" class="apt__branch" @click="toggle(entry)">
@@ -58,6 +77,10 @@
           </div>
         </div>
       </div>
+      <div v-if="rootCollapsed && isRoot && rootOpen" class="apt__close">
+        <span class="jt__bracket">{{ isArrayRoot ? ']' : '}' }}</span>
+        <span class="jt__count">{{ rootCount }} {{ isArrayRoot ? '项' : '键' }}</span>
+      </div>
     </template>
   </div>
 </template>
@@ -81,17 +104,27 @@ export default {
     // 最大可展开深度（保护）：达到该深度的复合节点不再可展开，
     // 避免日志中循环引用 / 超深结构在展开时无限递归。默认 100（接口调用场景基本无感）。
     maxDepth: { type: Number, default: 100 },
+    // 根节点默认折叠成一行摘要（事件日志使用）；接口调用面板保持逐行铺开
+    rootCollapsed: { type: Boolean, default: false },
   },
   data() {
     return {
       // 若未传入共享状态（理论只发生在根），自行创建，保证递归子组件拿到同一引用
       localOpenState: this.openState || reactive({}),
+      // 根摘要行的展开态（仅 rootCollapsed 场景使用）
+      rootOpen: false,
     }
   },
   computed: {
     isRoot() {
       return this.depth === 0
     },
+    isArrayRoot() {
+      return Array.isArray(this.value)
+    },
+    rootCount() {
+      return this.isArrayRoot ? this.value.length : Object.keys(this.value || {}).length
+    },
     state() {
       return this.openState || this.localOpenState
     },

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"

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/ComponentPalette.vue

@@ -129,11 +129,13 @@ export default {
 .cp__mask {
   position: fixed;
   inset: 0;
-  background: var(--scrim);
+  /* 与确认框 .confirm-mask 同款模糊遮罩：暗色半透明 + 2px 背景模糊 */
+  background: var(--scrim-modal);
+  backdrop-filter: blur(var(--scrim-modal-blur));
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: var(--z-modal);
 }
 
 .cp {
@@ -142,8 +144,8 @@ export default {
   max-height: calc(100vh - 64px);
   background: var(--bg-panel);
   border: 1px solid var(--border-strong);
-  border-radius: 10px;
-  box-shadow: 0 18px 48px var(--shadow-pop);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-4);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -152,29 +154,35 @@ export default {
 
 .cp__head {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 10px;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--border-strong);
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
 }
 .cp__title {
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 600;
 }
 .cp__hint {
-  font-size: 12px;
-  color: var(--text-dim);
+  font-size: 11px;
+  color: var(--text-faint);
 }
 .cp__close {
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
   background: transparent;
   border: none;
-  color: var(--text-dim);
-  font-size: 16px;
+  border-radius: 6px;
+  color: var(--text-faint);
+  font-size: 15px;
   cursor: pointer;
   line-height: 1;
-  padding: 2px 6px;
-  border-radius: 4px;
+  transition: background 0.15s, color 0.15s;
 }
 .cp__close:hover {
   background: var(--bg-hover);
@@ -182,16 +190,16 @@ export default {
 }
 
 .cp__body {
-  padding: 8px 16px 16px;
+  padding: 10px 16px 16px;
   overflow-y: auto;
 }
 
 .cp__group {
-  margin-top: 12px;
+  margin-top: 10px;
 }
 .cp__group-title {
-  margin: 0 0 8px;
-  font-size: 12px;
+  margin: 0 0 6px;
+  font-size: 11px;
   font-weight: 600;
   color: var(--text-faint);
   letter-spacing: 0.04em;
@@ -200,7 +208,7 @@ export default {
 .cp__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
+  gap: 6px;
 }
 
 .cp__item {
@@ -208,21 +216,17 @@ export default {
   flex-direction: column;
   align-items: center;
   gap: 4px;
-  padding: 10px 6px;
-  background: var(--bg-input);
+  padding: 8px 6px;
+  background: transparent;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   color: var(--text);
-  transition: border-color 0.12s, background 0.12s, transform 0.08s;
+  transition: border-color 0.15s, background 0.15s;
 }
 .cp__item:hover {
-  border-color: var(--accent);
-  background: var(--bg-hover);
-  transform: translateY(-1px);
-}
-.cp__item:active {
-  transform: translateY(0);
+  border-color: var(--accent-border);
+  background: var(--accent-soft);
 }
 
 .cp__avatar {
@@ -234,14 +238,17 @@ export default {
   justify-content: center;
   font-size: 15px;
   font-weight: 600;
-  color: var(--on-accent);
-  background: var(--accent);
+  color: var(--text-dim);
+  background: var(--bg-hover);
 }
+/* 分组语义色：布局 = accent、基础 = ok，均用 soft 底 + 同色线性图标，与全局轻风格一致 */
 .cp__avatar[data-g='layout'] {
-  background: var(--accent-2);
+  color: var(--accent);
+  background: var(--accent-soft);
 }
 .cp__avatar[data-g='basic'] {
-  background: var(--ok);
+  color: var(--ok);
+  background: var(--ok-soft);
 }
 .cp__avatar svg {
   display: block;
@@ -272,14 +279,14 @@ export default {
 .cp__search {
   box-sizing: border-box;
   width: 100%;
-  height: 32px;
+  height: 28px;
   margin-bottom: 10px;
-  padding: 0 10px;
-  font-size: 13px;
+  padding: 0 8px;
+  font-size: 12px;
   color: var(--text);
   background: var(--bg-input);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 6px;
   outline: none;
 }
 .cp__search:focus {
@@ -287,7 +294,7 @@ export default {
 }
 .cp__empty {
   margin: 8px 0;
-  color: var(--text-dim);
+  color: var(--text-faint);
   font-size: 12px;
   text-align: center;
 }

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>