cardbuddy 0.7.0 → 0.9.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,152 @@ 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 连接池：浏览器对同一 origin 的 HTTP/1.1 并发连接约 6 条，而 /__events 是长连接，
+ * 每条订阅各开一个 EventSource 会常驻占位（cards-changed + code-bridge 已占 2 条，服务日志
+ * 面板再占 1 条后，普通 API 请求只剩 3 条并发余量，截图 / 校验这类慢请求易排队）。
+ * 三类事件本就同源同端点，故按 base 复用一条连接、按事件名分发，引用计数归零才真正 close。
+ * @type {Map<string, { es: EventSource, states: Set<(s:string)=>void>, refs: number }>}
+ */
+const ssePool = new Map()
+
+function acquireSse(base) {
+  let entry = ssePool.get(base)
+  if (!entry) {
+    // EventSource 不能自定义请求头，配置了 token 时改经查询参数携带（服务端 tokenMiddleware 已支持）
+    const token = devServiceToken()
+    const es = new EventSource(base + '/__events' + (token ? '?token=' + encodeURIComponent(token) : ''))
+    entry = { es, states: new Set(), refs: 0 }
+    ssePool.set(base, entry)
+    es.onopen = () => {
+      for (const cb of entry.states) cb('open')
     }
-    es.addEventListener('cards-changed', handler)
-    es.onopen = () => emit('open')
     es.onerror = () => {
       // 断链时 onerror 触发，浏览器会自动重连：
       // readyState===0(CONNECTING) 表示正在重连；===2(CLOSED) 表示已彻底关闭（如显式 close）。
-      emit(es.readyState === 2 ? 'closed' : 'connecting')
+      const state = es.readyState === 2 ? 'closed' : 'connecting'
+      for (const cb of entry.states) cb(state)
+    }
+  }
+  entry.refs++
+  return entry
+}
+
+function releaseSse(base, entry) {
+  entry.refs = Math.max(0, entry.refs - 1)
+  if (entry.refs === 0 && ssePool.get(base) === entry) {
+    ssePool.delete(base)
+    try {
+      entry.es.close()
+    } catch (_) {
+      /* ignore */
     }
-    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 */
+}
+
+/**
+ * 通用 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（浏览器原生自动重连），同 base 复用一条连接
+      const entry = acquireSse(base)
+      const handler = (e) => {
+        try {
+          cb(e.data ? JSON.parse(e.data) : {})
+        } catch (_) {
+          cb({})
+        }
+      }
+      for (const name of events) entry.es.addEventListener(name, handler)
+      entry.states.add(emit)
+      // 复用已建立的连接时立即回写真实态，避免顶栏「连接」图标无谓闪「连接中」
+      emit(entry.es.readyState === 1 ? 'open' : entry.es.readyState === 2 ? 'closed' : 'connecting')
+      return () => {
+        for (const name of events) entry.es.removeEventListener(name, handler)
+        entry.states.delete(emit)
+        releaseSse(base, entry)
+      }
+    }
+    // 同源 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'])
+
+/**
+ * 订阅本地服务日志流（event: service-log）。
+ * 载荷 { lines: [{ seq, t, text }] }，text 为含 ANSI 的原始终端行，由 preview/ansi.js 还原配色。
+ *
+ * 连接开销说明：每条订阅各占一个 EventSource（浏览器对同源的并发连接有限），
+ * 因此服务日志采用「面板打开才订阅、关闭即退订」的懒连接策略（见 DebugPanel），
+ * 不与常驻的 cards-changed / code-bridge 抢连接。
+ */
+export const subscribeServiceLog = makeSseSubscriber(['service-log'])
+
+/**
+ * 取服务日志历史 / 断线补漏（GET /__logs）。
+ * @param {{ limit?: number, since?: number }} [opts] since：只取 seq 大于该值的行
+ * @returns {Promise<{ ok:boolean, enabled:boolean, seq:number, dropped:number, buffered:number, startedAt:number, pid:number, lines:{seq:number,t:number,text:string}[] }>}
+ */
+export async function fetchServiceLogs({ limit = 300, since = 0 } = {}) {
+  const q = new URLSearchParams({ limit: String(limit) })
+  if (since) q.set('since', String(since))
+  const res = await apiFetch('/__logs?' + q.toString())
+  if (!res.ok) throw new Error('HTTP ' + res.status)
+  return res.json()
+}
+
+/**
+ * 代码桥 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/components/ApiCallPanel.vue

@@ -32,7 +32,19 @@
       </button>
     </div>
     <div class="apipanel__body">
-      <p v-if="!apiCalls.length" class="debug__empty">暂无接口调用</p>
+      <!-- 空状态占位：虚线圆形徽章 + 插头图标（与全局 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">

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

@@ -10,9 +10,9 @@
   搜索框按 id / 名称过滤；Esc 或点遮罩关闭；当前选中卡高亮。
 -->
 <template>
-  <transition name="cg-fade">
+  <transition name="modal">
     <div v-if="visible" class="cg-mask" @click.self="close">
-      <div class="cg-modal" role="dialog" aria-modal="true" aria-label="卡片网格预览">
+      <div class="cg-modal modal-card" role="dialog" aria-modal="true" aria-label="卡片网格预览">
         <header class="cg-modal__head">
           <div class="cg-modal__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-grid" /></svg>

package/dist/vendored/components/ComponentPalette.vue

@@ -5,7 +5,7 @@
 -->
 <template>
   <div class="cp__mask" @click.self="$emit('close')">
-    <div class="cp" role="dialog" aria-label="选择组件类型">
+    <div class="cp modal-card" role="dialog" aria-label="选择组件类型">
       <div class="cp__head">
         <span class="cp__title">添加组件</span>
         <span class="cp__hint">选择要插入的组件类型</span>
@@ -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

@@ -1,7 +1,7 @@
 <template>
-  <transition name="confirm-fade">
+  <transition name="modal">
     <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 modal-card" role="alertdialog" aria-modal="true" :aria-label="title">
         <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>