cardbuddy 0.7.0 → 0.8.0

package/dist/server-core/index.js

@@ -27,6 +27,7 @@ import { createAssetProxyMiddleware } from './assetProxy.js'
 import { createSliceStaticMiddleware } from './sliceStatic.js'
 import { createCardImageMiddleware } from './cardImage.js'
 import { createOpenFolderMiddleware } from './cardOpenFolder.js'
+import { createCodeBridgeMiddleware } from './codeBridge.js'
 import { buildDataFromSchema } from './buildDataFromSchema.js'
 
 export {
@@ -47,16 +48,19 @@ export {
   createSliceStaticMiddleware,
   createCardImageMiddleware,
   createOpenFolderMiddleware,
+  createCodeBridgeMiddleware,
   buildDataFromSchema,
 }
 
 /**
  * 把全部卡片中间件挂到 Connect 风格容器（需实现 .use(mw)）。
  * @param {{ use: (mw: Function) => void }} app
- * @param {{ root: string, viteServer?: import('vite').ViteDevServer | null, upstream?: string }} opts
+ * @param {{ root: string, viteServer?: import('vite').ViteDevServer | null, upstream?: string, notify?: (data: object, event?: string) => void, watchFile?: (file: string, cb: () => void) => { close: () => void } }} opts
  *   - upstream：FinMall 远端站点基址（来自 FINMALL_BASE_URL），资源代理回源用；空串表示不回源。
+ *   - notify：SSE 推送入口（cardbuddy 的 /__events hub）；代码桥经它推 bridge 事件，缺省时静默降级。
+ *   - watchFile：代码桥单文件监听能力注入（chokidar 版）；缺省代码桥用 fs.watch 兜底。
  */
-export function mountCoreMiddlewares(app, { root, viteServer = null, upstream = '' }) {
+export function mountCoreMiddlewares(app, { root, viteServer = null, upstream = '', notify = null, watchFile = null }) {
   app.use(createSyncMiddleware({ root }))
   app.use(createPreviewMiddleware({ root }))
   app.use(createLoginCredentialsMiddleware({ root }))
@@ -76,6 +80,8 @@ export function mountCoreMiddlewares(app, { root, viteServer = null, upstream =
   app.use(createBboxMiddleware({ root }))
   // 在系统文件管理器中打开当前卡片本地目录（编辑器顶栏「打开目录」按钮触发，跨平台由后端完成）
   app.use(createOpenFolderMiddleware({ root }))
+  // 外部编辑器代码桥（VSCode / DSL_EDITOR_CMD）：临时 js + 保存回写 + 会话 TTL 清理
+  app.use(createCodeBridgeMiddleware({ root, notify, watchFile }))
   // 卡片预览图静态服务：/__card-image/<id> → src/cards/<id>/<id>.<ext>（编辑器网格预览缩略图用，
   // 复用本地静态服务，避免实时无头截图）。
   app.use(createCardImageMiddleware({ root }))

package/dist/standalone.js

@@ -290,8 +290,8 @@ function createEventsEndpoint() {
       clients.delete(res)
     })
   }
-  const notify = (data) => {
-    const payload = `event: cards-changed\ndata: ${JSON.stringify(data)}\n\n`
+  const notify = (data, event = 'cards-changed') => {
+    const payload = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`
     for (const res of clients) res.write(payload)
   }
   return { handler, notify }
@@ -397,7 +397,22 @@ export async function startServer(userConfig = {}) {
 
   const vite = await createEmbeddedVite(config)
   // upstream（FINMALL_BASE_URL）透传给资源代理中间件，使其能回源 FinMall 取站内资源
-  mountCoreMiddlewares(app, { root: config.root, viteServer: vite, upstream: config.upstream })
+  mountCoreMiddlewares(app, {
+    root: config.root,
+    viteServer: vite,
+    upstream: config.upstream,
+    notify: events.notify,
+    // 代码桥单文件监听注入 chokidar 版：原子保存（改名覆盖）由 add 兜住，awaitWriteFinish 防半截读
+    watchFile: (file, onChange) => {
+      const watcher = chokidar.watch(file, {
+        ignoreInitial: true,
+        awaitWriteFinish: { stabilityThreshold: 120, pollInterval: 40 },
+      })
+      watcher.on('change', onChange)
+      watcher.on('add', onChange)
+      return watcher
+    },
+  })
 
   watchCards(config.root, events.notify)
 

package/dist/vendored/App.vue

@@ -328,7 +328,9 @@
         </div>
       </div>
 
-      <!-- 拖拽分隔条：位于预览列与操作面板之间，拖动调整预览宽度（手机自动缩放填充） -->
+
+      <!-- 左分隔条：预览列 | 工作区 接缝。底面板 / 状态栏的左缘即此缝（随预览宽度联动），
+           故定位在 .app__stage 通到底部，全程可拖；右分隔条才收进两栏容器内。 -->
       <div
         v-show="!chromeOff"
         class="splitter"
@@ -337,22 +339,24 @@
         title="拖拽调整预览区域宽度"
       ></div>
 
-      <!-- 拖拽分隔条：位于调试面板与右侧「接口调用」面板之间，拖动调整右栏宽度。
-           约束：中栏（调试面板）最小宽度 ≥ 屏宽 1/3，右栏最小宽度 ≥ 320px（见 startApiDrag） -->
-      <div
-        v-show="!chromeOff && apiPanelOpen"
-        class="splitter splitter--api"
-        :class="{ 'is-dragging': apiDragging }"
-        @mousedown.prevent="startApiDrag"
-        title="拖拽调整接口调用面板宽度"
-      ></div>
-
       <!-- 中右工作区：上为「调试面板 + 接口调用面板」两栏，下为贯穿两栏的共同状态栏。
-           状态栏由 DebugPanel 内 Teleport 注入 #app-workside-bar；Teleport 目标须在 DOM 中
-           先于面板挂载，故 .workside__bar 写在前面，以 flex order 视觉置底。 -->
+           状态栏与底部弹出面板（运行态 / 事件 / 绑定错误）均由 DebugPanel 内 Teleport 注入
+           #app-workside-bar / #app-workside-panels，宽度贯穿中右两栏；Teleport 目标须在 DOM 中
+           先于面板挂载，故两个空容器写在前面，以 flex order 视觉置底。 -->
       <div class="workside" v-show="!chromeOff">
         <div id="app-workside-bar" class="workside__bar"></div>
+        <div id="app-workside-panels" class="workside__panels"></div>
         <div class="workside__cols">
+          <!-- 拖拽分隔条：置于两栏容器内（定位上下文），只贯穿列区高度，不穿过底部弹出面板与状态栏 -->
+          <!-- 中右分隔条：调试面板 | 接口调用面板 接缝，拖动调整右栏宽度。
+               约束：中栏最小宽度 ≥ 屏宽 1/3，右栏最小宽度 ≥ 320px（见 startApiDrag） -->
+          <div
+            v-show="!chromeOff && apiPanelOpen"
+            class="splitter splitter--api"
+            :class="{ 'is-dragging': apiDragging }"
+            @mousedown.prevent="startApiDrag"
+            title="拖拽调整接口调用面板宽度"
+          ></div>
           <DebugPanel
             :chrome-off="chromeOff"
             :rt="rt"

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/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/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;
 }