cardbuddy 0.8.0 → 0.9.1

package/dist/vendored/App.vue

@@ -253,9 +253,11 @@
         <div class="phone__frame" :style="frameStyle">
         <!-- 画布层：直接按实际列宽/列高布局（width/height 100%），不再使用 transform 缩放 -->
         <div class="phone__scaler">
-        <!-- 设备工具条（类 Chrome DevTools 设备模式）：下拉选择画布背景 -->
-        <div class="device-bar" v-show="!chromeOff">
-          <!-- 背景选择下拉框：无边框模式（工具栏文字式控件） -->
+        <!-- 画布工具条：原 device-bar（顶 28px）+ preview-statusbar（底 28px）合并为一条 32px，
+             竖向空间还给手机视口。左组=改变画布（背景 / 宽度预设），右组=画布现状与动作（尺寸读数 / 刷新）；
+             预览列窄于 300px 时收起读数与文案只留图标（188 预设下仍单行可用）。 -->
+        <div class="canvas-bar" :class="{ 'canvas-bar--tight': previewWidth < 300 }" v-show="!chromeOff">
+          <!-- 画布背景：触发器带当前底色小样，不展开下拉也可见当前模式 -->
           <Dropdown
             borderless
             size="xs"
@@ -263,19 +265,47 @@
             :value="canvasBg"
             :options="bgOptions.map((b) => ({ key: b.key, value: b.label + '背景' }))"
             @change="chooseBg"
-          />
-          <span class="device-bar__spacer"></span>
-          <span class="device-bar__label">宽度</span>
-          <!-- 预设尺寸下拉：与背景下拉同款；触发器实时显示当前画布宽度，展开为 375 / 188 两个预设，切换即动态改宽度（高度随列高自动一致） -->
+          >
+            <template #trigger>
+              <span class="canvas-bar__chip" :title="'画布背景：' + currentBg.label">
+                <i class="canvas-bar__swatch" :class="'canvas-bar__swatch--' + canvasBg"></i>
+                <span class="canvas-bar__txt">{{ currentBg.label }}背景</span>
+                <svg class="canvas-bar__chev" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-chevron" /></svg>
+              </span>
+            </template>
+          </Dropdown>
+          <!-- 宽度预设：触发器直接显示当前宽度，省去独立的「宽度」标签 -->
           <Dropdown
             borderless
             size="xs"
-            placement="bottom-end"
+            placement="bottom-start"
             :value="canvasW"
-            :label="canvasW + ' px'"
             :options="presetSizes"
             @change="setPresetWidth"
-          />
+          >
+            <template #trigger>
+              <span class="canvas-bar__chip" title="画布宽度预设（高度随列高自适应）">
+                <svg class="canvas-bar__icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="8 7 4 12 8 17" /><polyline points="16 7 20 12 16 17" /><line x1="4" y1="12" x2="20" y2="12" /></svg>
+                <span class="canvas-bar__txt">{{ canvasW }} px</span>
+                <svg class="canvas-bar__chev" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-chevron" /></svg>
+              </span>
+            </template>
+          </Dropdown>
+          <span class="canvas-bar__spacer"></span>
+          <span class="canvas-bar__size" title="画布实际尺寸（宽 × 高，高度随窗口自适应）">{{ canvasW }} × {{ viewportHeight }}</span>
+          <button
+            class="canvas-bar__iconbtn"
+            :class="{ 'is-loading': refreshing }"
+            type="button"
+            :disabled="!selectedId || refreshing"
+            title="刷新卡片，重新加载"
+            @click="refreshCard"
+          >
+            <svg class="canvas-bar__icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+              <path d="M21 3v6h-6" />
+            </svg>
+          </button>
         </div>
         <!--
           固定视口：弹层（alertCard / alertDialog / toast）相对此容器 absolute inset:0 定位，
@@ -307,23 +337,6 @@
           <PickerOverlay />
           <DatePickerOverlay />
         </div>
-        <!-- 预览区底部状态条：显示画布宽高（左）+ 刷新按钮（右），chromeOff 时隐藏 -->
-        <div class="preview-statusbar" v-show="!chromeOff">
-          <span class="device-bar__info">{{ canvasW }} × {{ viewportHeight }}</span>
-          <span class="device-bar__spacer"></span>
-          <button
-            class="statusbar__refresh"
-            type="button"
-            :disabled="!selectedId"
-            @click="refreshCard"
-            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">
-              <path d="M21 12a9 9 0 1 1-2.64-6.36" />
-              <path d="M21 3v6h-6" />
-            </svg>
-          </button>
-        </div>
         </div>
         </div>
       </div>
@@ -340,7 +353,7 @@
       ></div>
 
       <!-- 中右工作区：上为「调试面板 + 接口调用面板」两栏，下为贯穿两栏的共同状态栏。
-           状态栏与底部弹出面板（运行态 / 事件 / 绑定错误）均由 DebugPanel 内 Teleport 注入
+           状态栏与底部弹出面板（运行态 / 事件 / 变量绑定）均由 DebugPanel 内 Teleport 注入
            #app-workside-bar / #app-workside-panels，宽度贯穿中右两栏；Teleport 目标须在 DOM 中
            先于面板挂载，故两个空容器写在前面，以 flex order 视觉置底。 -->
       <div class="workside" v-show="!chromeOff">
@@ -383,6 +396,7 @@
             :dev-svc-class="devSvcClass"
             :dev-svc-title="devSvcTitle"
             :dev-svc-label="devSvcLabel"
+            :dev-svc-conn="devSvcConn"
           />
 
           <!-- 右侧常驻「接口调用」面板：与预览列 / 调试面板呈左中右布局，
@@ -403,8 +417,9 @@
       @close="remotePreviewOpen = false"
     />
     <!-- 登录凭据弹窗：远程同步检测到缺凭据时弹出，填写账号密码（MD5 后）写入 .local/credentials.json -->
+    <Transition name="modal">
     <div v-if="loginModal" class="login-mask" @click.self="closeLoginModal">
-      <div class="login-modal" role="dialog" aria-modal="true">
+      <div class="login-modal modal-card" role="dialog" aria-modal="true">
         <div class="login-modal__title">FinMall 登录凭据</div>
         <div class="login-modal__desc">
           本地登录凭据缺失，请填写账号与密码。密码仅做 MD5 后保存，不落明文。
@@ -452,12 +467,15 @@
         </div>
       </div>
     </div>
+    </Transition>
     <!-- 组件选择面板：点击结构树每行的「＋」后弹出，选择类型即插入对应节点 -->
-    <ComponentPalette
-      v-if="addNodePanelOpen"
-      @pick="onPickComponent"
-      @close="cancelAddNode"
-    />
+    <Transition name="modal">
+      <ComponentPalette
+        v-if="addNodePanelOpen"
+        @pick="onPickComponent"
+        @close="cancelAddNode"
+      />
+    </Transition>
     <!-- 二次确认弹窗：版本推送 / 当前同步 / 全量同步 等写/覆盖类操作前弹出，确认后才执行 -->
     <ConfirmDialog
       :visible="confirm.show"
@@ -650,6 +668,8 @@ export default {
       viewportHeight: 700, // 手机视口实际高度（高度自适应填充后由 ResizeObserver 实测更新）
       // 画布背景模式：checker（棋盘格） / white（白色） / gray（浅灰）
       canvasBg: 'gray',
+      // 刷新按钮进行态：图标自转 + 禁用，避免连点与「点了没反应」
+      refreshing: false,
       bgOptions: [
         { key: 'checker', label: '棋盘' },
         { key: 'white', label: '白色' },
@@ -801,7 +821,7 @@ export default {
       const w = this._previewWidthPx || minW
       return Math.max(minW, Math.min(maxW, w))
     },
-    // 画布实际宽度（列宽，整数）：device-bar__info 实时显示用，拖拽分隔条时随之变化
+    // 画布实际宽度（列宽，整数）：canvas-bar__size 实时显示用，拖拽分隔条时随之变化
     canvasW() {
       return Math.round(this.previewWidth || 375)
     },
@@ -852,7 +872,7 @@ export default {
     window.removeEventListener('keydown', this.onKeydown)
   },
   mounted() {
-    // 视口高度随窗口弹性填充，实测高度同步到 device-bar 信息条
+    // 视口高度随窗口弹性填充，实测高度同步到 canvas-bar 尺寸读数
     this.viewportObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         this.viewportHeight = Math.round(entry.contentRect.height)
@@ -1137,8 +1157,13 @@ export default {
      * 底部状态条刷新按钮：重新从本地开发服务拉取当前卡片并重建预览。
      */
     async refreshCard() {
-      if (!this.selectedId) return
-      await this.loadCard(this.selectedId)
+      if (!this.selectedId || this.refreshing) return
+      this.refreshing = true
+      try {
+        await this.loadCard(this.selectedId)
+      } finally {
+        this.refreshing = false
+      }
     },
     // 切换深/浅主题：写入 <html data-theme> 并持久化，刷新后保持
     toggleTheme() {

package/dist/vendored/ansi.js

@@ -0,0 +1,185 @@
+/**
+ * preview/ansi.js
+ * 终端 ANSI 转义 → HTML 的最小解析器，供底部「服务日志」面板 1:1 还原 cardbuddy 终端配色。
+ *
+ * 为什么自己写而不引 ansi_up / ansi-to-html：
+ *  - 只需覆盖本项目实际产出的子集：chalk 的真彩 SGR（38;2;r;g;b）、256 色（38;5;n）、
+ *    基础 8/16 色、粗体/暗淡/斜体/下划线，以及需要丢弃的 CSI 擦除类与 OSC 序列；
+ *  - 零依赖、零体积负担，且输出形态可控（style 内联 + 语义 class），便于与主题令牌对齐；
+ *  - 解析器行为可单测（tools/tests/ansi.test.mjs），不受第三方版本变更影响。
+ *
+ * 安全：所有文本片段先做 HTML 转义再拼接，样式值只来自白名单数字（RGB 分量 / 关键字），
+ * 不存在把日志内容当 HTML 注入的路径（v-html 消费本模块输出）。
+ */
+
+/** 匹配一段 ANSI 转义：CSI 序列 / OSC 序列 / 双字符 ESC 序列。 */
+const ANSI_RE =
+  // eslint-disable-next-line no-control-regex
+  /\x1b\[[0-9;:?]*[ -/]*[@-~]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)|\x1b[@-Z\\-_]/g
+
+/** 去掉全部 ANSI 转义，得到纯文本（用于复制、搜索、宽度计算）。 */
+export function stripAnsi(input) {
+  return String(input == null ? '' : input).replace(ANSI_RE, '')
+}
+
+/** 基础 8 色（xterm 常规档），与终端默认调色板一致的近似值。 */
+const BASIC = [
+  [0, 0, 0],
+  [170, 0, 0],
+  [0, 170, 0],
+  [170, 85, 0],
+  [0, 0, 170],
+  [170, 0, 170],
+  [0, 170, 170],
+  [170, 170, 170],
+]
+/** 高亮 8 色（bold / 90-97 使用）。 */
+const BRIGHT = [
+  [85, 85, 85],
+  [255, 85, 85],
+  [85, 255, 85],
+  [255, 255, 85],
+  [85, 85, 255],
+  [255, 85, 255],
+  [85, 255, 255],
+  [255, 255, 255],
+]
+
+function clamp255(n) {
+  const v = Math.round(Number(n))
+  if (!Number.isFinite(v)) return 0
+  return v < 0 ? 0 : v > 255 ? 255 : v
+}
+
+/** 256 色索引 → RGB（0-7 基础 / 8-15 高亮 / 16-231 6×6×6 立方 / 232-255 灰阶）。 */
+export function color256(n) {
+  const i = clamp255(n)
+  if (i < 8) return BASIC[i]
+  if (i < 16) return BRIGHT[i - 8]
+  if (i < 232) {
+    const k = i - 16
+    const step = (v) => (v ? v * 40 + 55 : 0)
+    return [step(Math.floor(k / 36)), step(Math.floor((k % 36) / 6)), step(k % 6)]
+  }
+  const g = 8 + (i - 232) * 10
+  return [g, g, g]
+}
+
+function escapeHtml(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+function rgbCss(rgb) {
+  return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
+}
+
+/** 新建一份 SGR 状态（全部为默认值）。 */
+function newState() {
+  return { fg: null, bg: null, bold: false, dim: false, italic: false, underline: false }
+}
+
+function isDefault(st) {
+  return !st.fg && !st.bg && !st.bold && !st.dim && !st.italic && !st.underline
+}
+
+/** 按状态生成 style 串；默认态返回空串（调用方据此决定是否包 span）。 */
+function styleOf(st) {
+  const parts = []
+  // 终端惯例：粗体 + 基础色 → 走高亮档，还原 chalk.magenta.bold 之类的观感
+  let fg = st.fg
+  if (fg && fg.basic != null) fg = { rgb: st.bold ? BRIGHT[fg.basic] : BASIC[fg.basic] }
+  if (fg) parts.push(`color:${rgbCss(fg.rgb)}`)
+  if (st.bg) parts.push(`background-color:${rgbCss(st.bg.rgb)}`)
+  if (st.bold) parts.push('font-weight:600')
+  if (st.dim) parts.push('opacity:.72')
+  if (st.italic) parts.push('font-style:italic')
+  if (st.underline) parts.push('text-decoration:underline')
+  return parts.join(';')
+}
+
+/**
+ * 解析一段 SGR 参数（`\x1b[<params>m` 里的 params），就地修改状态。
+ * 支持：0 重置、1/2/3/4 与 22/23/24 关闭、30-37/90-97 前景、40-47/100-107 背景、
+ * 39/49 默认前景背景、38;5;n 与 38;2;r;g;b（含 48 背景版、冒号分隔变体）。
+ */
+function applySgr(state, paramStr) {
+  const raw = String(paramStr || '')
+  // 冒号变体（38:2::r:g:b / 38:5:n）统一按分号处理，ITU-T T.416 形式在本项目不出现，取近似即可
+  const codes = (raw === '' ? '0' : raw).split(/[;:]/).map((c) => (c === '' ? 0 : Number(c)))
+  for (let i = 0; i < codes.length; i++) {
+    const c = codes[i]
+    if (!Number.isFinite(c)) continue
+    if (c === 0) {
+      Object.assign(state, newState())
+    } else if (c === 1) state.bold = true
+    else if (c === 2) state.dim = true
+    else if (c === 3) state.italic = true
+    else if (c === 4) state.underline = true
+    else if (c === 22) {
+      state.bold = false
+      state.dim = false
+    } else if (c === 23) state.italic = false
+    else if (c === 24) state.underline = false
+    else if (c === 39) state.fg = null
+    else if (c === 49) state.bg = null
+    else if (c >= 30 && c <= 37) state.fg = { basic: c - 30 }
+    else if (c >= 90 && c <= 97) state.fg = { rgb: BRIGHT[c - 90] }
+    else if (c >= 40 && c <= 47) state.bg = { basic: c - 40 }
+    else if (c >= 100 && c <= 107) state.bg = { rgb: BRIGHT[c - 100] }
+    else if (c === 38 || c === 48) {
+      const mode = codes[i + 1]
+      let rgb = null
+      let consumed = 0
+      if (mode === 5) {
+        rgb = color256(codes[i + 2])
+        consumed = 2
+      } else if (mode === 2) {
+        rgb = [clamp255(codes[i + 2]), clamp255(codes[i + 3]), clamp255(codes[i + 4])]
+        consumed = 4
+      }
+      if (rgb) {
+        if (c === 38) state.fg = { rgb }
+        else state.bg = { rgb }
+        i += consumed
+      }
+    }
+    // 其余（5 闪烁 / 7 反显 / 9 删除线 …）本项目不产出，忽略即可
+  }
+}
+
+/**
+ * 单行 ANSI → HTML。
+ * @param {string} line 原始行（可含 ANSI）
+ * @returns {string} 转义后的 HTML（默认态文本不包 span，避免无谓节点）
+ */
+export function ansiToHtml(line) {
+  const text = String(line == null ? '' : line)
+  if (!text) return ''
+  if (text.indexOf('\x1b') < 0) return escapeHtml(text)
+  const state = newState()
+  let out = ''
+  let last = 0
+  let m
+  ANSI_RE.lastIndex = 0
+  while ((m = ANSI_RE.exec(text)) !== null) {
+    if (m.index > last) {
+      out += renderSegment(text.slice(last, m.index), state)
+    }
+    last = m.index + m[0].length
+    const seq = m[0]
+    // 只处理 SGR（…m）；CSI 擦除/光标类与 OSC 一律丢弃（浏览器面板里没有光标语义）
+    if (seq[1] === '[' && /[m]$/.test(seq)) applySgr(state, seq.slice(2, -1))
+  }
+  if (last < text.length) out += renderSegment(text.slice(last), state)
+  return out
+}
+
+function renderSegment(chunk, state) {
+  if (!chunk) return ''
+  const esc = escapeHtml(chunk)
+  if (isDefault(state)) return esc
+  const style = styleOf(state)
+  return style ? `<span style="${style}">${esc}</span>` : esc
+}
+
+export default ansiToHtml

package/dist/vendored/api.js

@@ -127,6 +127,49 @@ export async function apiFetch(path, opts = {}) {
  * @param {(state:'connecting'|'open'|'closed')=>void} [onState] 连接态变化回调，
  *   用于驱动顶栏「连接」图标实时反映服务端运行态（SSE readyState / Vite HMR ws 生命周期）。
  */
+/**
+ * 共享 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.onerror = () => {
+      // 断链时 onerror 触发，浏览器会自动重连：
+      // readyState===0(CONNECTING) 表示正在重连；===2(CLOSED) 表示已彻底关闭（如显式 close）。
+      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 */
+    }
+  }
+}
+
 /**
  * 通用 SSE 订阅工厂：监听 /__events 上的一组事件名，返回取消订阅函数。
  * base === ''（开发期同源代理）同样走 SSE：请求相对当前页面 host，由 Vite 转发到 8787，
@@ -140,8 +183,8 @@ function makeSseSubscriber(events, { hmrEvents = [] } = {}) {
     const base = resolveApiBase()
     const emit = (s) => { if (typeof onState === 'function') onState(s) }
     if (base !== null) {
-      // 本地服务 / 同源代理：SSE（浏览器原生自动重连）
-      const es = new EventSource(base + '/__events')
+      // 本地服务 / 同源代理：SSE（浏览器原生自动重连），同 base 复用一条连接
+      const entry = acquireSse(base)
       const handler = (e) => {
         try {
           cb(e.data ? JSON.parse(e.data) : {})
@@ -149,15 +192,15 @@ function makeSseSubscriber(events, { hmrEvents = [] } = {}) {
           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')
+      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)
       }
-      emit('connecting') // 刚创建即处于 CONNECTING，先置为「连接中」
-      return () => es.close()
     }
     // 同源 dev server：沿用 Vite HMR（底层 WebSocket，同样具备连接态）
     if (import.meta.hot && hmrEvents.length) {
@@ -180,6 +223,29 @@ export const subscribeCardsChanged = makeSseSubscriber(['cards-changed'], { hmrE
 /** 订阅外部编辑器代码桥事件（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 拉取外部保存后的最新代码；

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>

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>