cardbuddy 0.6.0 → 0.7.0

package/dist/vendored/styles/app.css

@@ -3,8 +3,9 @@
    说明：设备模拟 UI（.dlg / .dtoast / .pk-* 等原生弹框白底）模拟真机外观，不随主题变化，保持固定。 */
 /* 配色 Token 与《深浅主题配色规范手册》映射（语义单一 / 双主题同义词切换）：
    --accent/-2/-soft/-border/-hover = 主色 color-primary（及 hover/active 变体）
-   --ok/-soft/-border/-strong       = 成功 success（深色提亮 #34D399 / 浅色 #10B981）
-   --warn/-soft/-border             = 警告 warning（琥珀）
+   --ok/-soft/-border/-strong/-solid = 成功 success（深色提亮 #34D399 / 浅色 #10B981）
+   --on-ok                           = 成功实心填充（--ok-solid）上的文字
+   --warn/-soft/-border/-hover      = 警告 warning（琥珀）；--on-warn = 警告实心填充上的深色文字
    --danger/-soft/-hover            = 错误 / 危险 error（红）
    --info/-soft/-border             = 信息 info（与主色同源，均为蓝）
    --on-accent                      = 主色填充上的文字（深色 #0F1115 / 浅色 #fff）
@@ -38,10 +39,16 @@
   --warn: #FBBF24;
   --warn-soft: rgba(251, 191, 36, 0.14);
   --warn-border: rgba(251, 191, 36, 0.4);
+  --warn-hover: #F59E0B;
+  --on-warn: #0F1115;
   --ok: #34D399;
   --ok-soft: rgba(52, 211, 153, 0.16);
   --ok-border: rgba(52, 211, 153, 0.45);
   --ok-strong: #34D399;
+  /* 成功态「实心填充」徽标（标签 / 角标浮在任意底色上时用）：--ok-solid 为底、--on-ok 为其上文字。
+     与 --ok-soft（半透明，仅适合压在已知面板色上）区分：实心版不透明，浮在白色缩略图上仍达 WCAG AA。 */
+  --ok-solid: #17734A;
+  --on-ok: #ffffff;
   --info: #6B83F7;
   --info-soft: rgba(107, 131, 247, 0.14);
   --info-border: rgba(107, 131, 247, 0.45);
@@ -192,10 +199,14 @@
   --warn: #F59E0B;
   --warn-soft: rgba(245, 158, 11, 0.14);
   --warn-border: rgba(245, 158, 11, 0.4);
+  --warn-hover: #D97706;
+  --on-warn: #0F1115;
   --ok: #10B981;
   --ok-soft: rgba(16, 185, 129, 0.14);
   --ok-border: rgba(16, 185, 129, 0.4);
   --ok-strong: #166534;
+  --ok-solid: #166534;
+  --on-ok: #ffffff;
   --info: #4F6BF2;
   --info-soft: rgba(79, 107, 242, 0.12);
   --info-border: rgba(79, 107, 242, 0.4);
@@ -382,6 +393,12 @@ body {
   height: var(--ctrl-md);
   padding: 0 8px;
 }
+/* 开关型图标按钮的「开启」态（如右侧接口调用面板开关）：用主题色标示当前已展开 */
+.app__btn--active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--accent-border);
+}
 /* 顶栏图标按钮（刷新 / 连接）与远端、op-group 统一为 28px（--ctrl-sm），不再高 32px */
 .app__bar .app__btn--icon {
   height: var(--ctrl-sm);
@@ -423,11 +440,16 @@ body {
 .app__icon--chev {
   transition: transform 0.15s;
 }
-/* 下拉项：保存类 hover 蓝色、同步类 hover 绿色（基础布局见 dropdown.css .app__remote-item） */
+/* 下拉项：保存/上传类 hover 蓝色与琥珀、同步类 hover 绿色（基础布局见 dropdown.css .app__remote-item） */
 .app__remote-item--save:hover {
   background: var(--accent-soft);
   color: var(--accent);
 }
+/* 切图上传：琥珀色，与「版本推送」（蓝）、「同步」（绿）区分——传的是素材不是版本 */
+.app__remote-item--upload:hover {
+  background: var(--warn-soft);
+  color: var(--warn);
+}
 .app__remote-item--sync:hover {
   background: var(--ok-soft);
   color: var(--ok);
@@ -845,6 +867,27 @@ body {
   position: relative; /* 作为绝对定位 splitter 的定位上下文 */
 }
 
+/* 中右工作区：纵向 flex——上为「调试面板 + 接口调用面板」两栏，下为贯穿两栏的共同状态栏。
+   状态栏由 DebugPanel 内 Teleport 注入 .workside__bar；该目标在 DOM 中先于两栏容器
+   （Teleport 挂载要求目标已存在），故用 order 把它视觉置底。 */
+.workside {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.workside__bar {
+  flex: 0 0 auto;
+  order: 1;
+}
+.workside__cols {
+  flex: 1 1 auto;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
 .phone {
   flex: 0 0 auto;
   display: flex;
@@ -889,6 +932,11 @@ body {
   z-index: var(--z-sticky);
   transition: background 0.15s ease;
 }
+/* 中右分隔条：以右侧「接口调用」面板右缘（即舞台右缘）回推面板宽度定位接缝 */
+.splitter--api {
+  left: auto;
+  right: calc(var(--api-panel-width, 360px) - 3px);
+}
 .splitter:hover,
 .splitter.is-dragging {
   background: var(--splitter);
@@ -1082,17 +1130,84 @@ body {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-  min-width: 300px;
+  /* 中栏最小宽度：不得小于三分之一屏幕宽度（与中右分隔条 startApiDrag 的夹取一致） */
+  min-width: 33.333vw;
+  background: var(--bg-panel);
+  border-left: 1px solid var(--border);
+}
+
+/* 右侧常驻「接口调用」面板：默认 360px 宽，可经中右分隔条拖拽调节（最小 320px，
+   宽度由 App 以 --api-panel-width CSS 变量下发），与预览列 / 调试面板呈左中右布局。
+   展开/收起由顶栏按钮与面板内 ✕ 控制（v-if 整体挂载/卸载）。 */
+.apipanel {
+  flex: 0 0 auto;
+  width: var(--api-panel-width, 360px);
+  min-width: 320px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
   background: var(--bg-panel);
   border-left: 1px solid var(--border);
 }
+.apipanel__head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* 与调试面板 tab 条同高（12px 上下 padding + 13px 字号 ≈ 42px），保证三条栏顶线对齐 */
+  height: 40px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border);
+}
+.apipanel__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+}
+.apipanel__spacer {
+  flex: 1 1 auto;
+}
+.apipanel__btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
+}
+.apipanel__btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+  border-color: var(--border);
+  color: var(--text);
+}
+.apipanel__btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.apipanel__btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.apipanel__body {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 8px 12px;
+}
 .debug__tabs {
   display: flex;
   border-bottom: 1px solid var(--border);
 }
 .debug__tab {
   flex: 1;
-  padding: 12px 8px;
+  padding: 10px 8px;
+  height: 39px;
   background: transparent;
   border: none;
   color: var(--text-dim);
@@ -1133,12 +1248,11 @@ body {
   position: relative;
   flex: 1 1 auto;
   overflow: auto;
-  padding: 12px 16px;
+  /* padding: 12px 16px; */
 }
-.debug__placeholder {
-  display: block;
-  width: 100%;
-  height: 38px;
+.debug__meta {
+  margin: 0;
+  padding: 8px 12px;
 }
 .debug__empty {
   color: var(--text-faint);
@@ -1282,42 +1396,6 @@ body {
   color: var(--danger);
   background: var(--danger-soft);
 }
-/* 接口调用标签页工具条（仿 Chrome 控制台） */
-.debug__clear {
-  /* 通用带边框按钮：固定在接口调用 tab 右上角、不随滚动，方便随时清空日志 */
-  position: sticky;
-  top: 0;
-  float: right;
-  z-index: var(--z-sticky);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  background: var(--bg-input);
-  color: var(--text);
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
-  cursor: pointer;
-  box-shadow: -10px 0 10px var(--bg-panel);
-  transition: background 0.15s, border-color 0.15s, transform 0.05s;
-}
-.debug__clear:hover:not(:disabled) {
-  background: var(--bg-hover);
-  border-color: var(--accent-border);
-}
-.debug__clear:active:not(:disabled) {
-  transform: translateY(1px);
-}
-.debug__clear:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-/* 接口调用列表顶部留白，避免首行被右上角浮动的清空按钮遮挡 */
-.debug__list--api {
-  padding-top: 34px;
-}
 .debug__list {
   list-style: none;
   margin: 0;
@@ -1456,7 +1534,7 @@ body {
   /* right:0 让 JSON 树滚动条紧贴面板最右边（与其他 tab 用 body padding 作
      16px 滚动框不同，本 tab 滚动交给内部 .debug__scope-tree，需要贴边）；
      left:16px 与 body 的 16px 内边距对齐，让树内容左缘与其他 tab 一致。 */
-  inset: 10px 10px 10px 16px;
+  inset: 0;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -1521,8 +1599,8 @@ body {
   padding: 12px 14px;
   background: var(--bg-input);
   color: var(--text);
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
+  /* border: 1px solid var(--border-strong); */
+  /* border-radius: 8px; */
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
   line-height: 1.6;
@@ -1531,9 +1609,9 @@ body {
   overflow: auto;
   outline: none;
 }
-.debug__raw-editor:focus {
+/* .debug__raw-editor:focus {
   border-color: var(--accent-border);
-}
+} */
 /* CodeJar 托管的原始 JSON 编辑器：Prism(json) 语法高亮配色（与 SetCode 暗色面板一致） */
 .debug__raw-editor .token.property,
 .debug__raw-editor .token.tag,
@@ -2503,6 +2581,10 @@ body {
 .confirm-modal__title.is-danger {
   color: var(--danger);
 }
+/* 警告级（warn）：覆盖推送类操作（版本推送等）——标题与图标取琥珀警告色，见配色规范 §2.7 / §3.4 */
+.confirm-modal__title.is-warn {
+  color: var(--warn);
+}
 .confirm-modal__icon {
   width: 18px;
   height: 18px;
@@ -2555,6 +2637,15 @@ body {
 .confirm-modal__btn--danger:hover {
   background: var(--danger-hover);
 }
+/* 警告级确认按钮：琥珀实心 + 深色文字（琥珀底白字对比度不足，双主题统一深色 ink） */
+.confirm-modal__btn--warn {
+  border-color: var(--warn);
+  background: var(--warn);
+  color: var(--on-warn);
+}
+.confirm-modal__btn--warn:hover {
+  background: var(--warn-hover);
+}
 .confirm-fade-enter-active,
 .confirm-fade-leave-active {
   transition: opacity 0.15s ease;

package/dist/vendored/styles/card-gallery.css

@@ -170,6 +170,26 @@
   background: #fff;
   border-bottom: 1px solid var(--border);
 }
+/* 导入角标：悬浮在缩略图右上角，仅「有 .import-meta.json 侧车」的导入卡显示。
+   配色用成功态「实心」token（--ok-solid 底 + --on-ok 白字 + --ok-solid 同色描边）：
+   缩略图恒为白底，半透明的 --ok-soft 压上去会被吃成 ~2:1，实心深绿才达 WCAG AA，
+   且与顶栏 .app__badge--ok 同属 success 语义、不引入新色相。圆角取 --radius-xs（方形小标），无阴影。 */
+.cg-tile__tag {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 1;
+  padding: 2px 8px;
+  border-radius: var(--radius-xs);
+  background: var(--ok-strong);
+  color: var(--on-ok);
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+}
 .cg-tile__img {
   width: 100%;
   height: 100%;

package/dist/vendored/styles/card-select.css

@@ -121,6 +121,21 @@
 .csel__item--selected .csel__item-id {
   color: var(--accent);
 }
+/* 卡片来源圆点（6x6）：绿色 = 导入卡（有 .import-meta.json），灰色 = 本地卡（无来源信息）。
+   align-self:center + 固定行高保证与右侧 id/name 文本视觉居中对齐（不受行高影响）。 */
+.csel__dot {
+  flex: 0 0 auto;
+  align-self: center;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-faint);
+  opacity: 0.75;
+}
+.csel__dot--imported {
+  background: var(--ok);
+  opacity: 1;
+}
 .csel__item-id {
   font-weight: 600;
   color: var(--text);

package/dist/vendored/styles/json-tree.css

@@ -9,7 +9,7 @@
   display: flex;
   justify-content: flex-start;
   gap: 12px;
-  padding: 4px 12px 8px;
+  padding: 8px 12px;
   position: sticky;
   top: 0;
   z-index: var(--z-sticky);

package/dist/vendored/styles/structure-tree.css

@@ -8,6 +8,9 @@
 .st {
   position: relative;
   min-height: 100%;
+  /* flex 列布局 + 底部帮助按钮 margin-top:auto：内容不足一屏时按钮仍吸附面板底部 */
+  display: flex;
+  flex-direction: column;
 }
 
 /* 顶部工具条：与 JsonTree 的 .jt__toolbar 同款（sticky 顶部），
@@ -16,7 +19,7 @@
   display: flex;
   justify-content: flex-start;
   gap: 12px;
-  padding: 4px 0 8px;
+  padding: 8px 12px;
   position: sticky;
   top: 0;
   z-index: var(--z-sticky);
@@ -86,14 +89,141 @@
   list-style: none;
 }
 
-/* 操作提示：淡色弱文案，提示 Ctrl/⌘ 点击画布可定位节点 */
-.st__tip {
+/* 帮助悬浮按钮容器：零高度 sticky 吸附在滚动视口底部（滚动容器为外层 .debug__body），
+   内容过长时按钮仍固定于面板左下角可见，且不占用固定布局区域 */
+.st__help-wrap {
+  position: sticky;
+  bottom: 10px;
+  height: 0;
+  z-index: var(--z-pop);
+  /* 内容较短时把按钮推到 .st 底部（即面板可见区底部）；内容较长时由 sticky 吸附兜底 */
+  margin-top: auto;
+}
+.st__help {
+  position: absolute;
+  left: 10px;
+  bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: var(--bg-input);
+  color: var(--text-dim);
+  border: 1px solid var(--border-strong);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
+}
+.st__help:hover {
+  background: var(--bg-hover);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+.st__help:active {
+  transform: translateY(1px);
+}
+/* 气泡展开时按钮保持激活态配色 */
+.st__help--open {
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+/* 使用说明气泡：自左下角按钮向上弹出 */
+.st__help-pop {
+  position: absolute;
+  left: 10px;
+  bottom: 36px;
+  width: 300px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+.st__help-pop-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.st__help-pop-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+.st__help-pop-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.15s, color 0.15s;
+}
+.st__help-pop-close:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.st__help-pop-body {
   margin: 0;
-  padding: 6px 8px 8px;
+  padding: 10px 12px;
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.6;
+}
+/* 快捷键清单：左列按键示意（kbd 芯片），右列一句话说明 */
+.st__keys {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.st__keys-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.st__keys-combo {
+  flex: 0 0 108px; /* 左列固定宽度，组合键纵向对齐 */
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+}
+.st__kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  background: var(--bg-input);
+  color: var(--text);
+  border: 1px solid var(--border-strong);
+  border-bottom-width: 2px; /* 键帽底部加厚，模拟按键立体感 */
+  border-radius: 5px;
+  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  line-height: 1;
+}
+.st__kbd-plus {
   color: var(--text-faint);
   font-size: 11px;
+}
+.st__keys-desc {
+  flex: 1 1 auto;
+  color: var(--text-dim);
+  font-size: 12px;
   line-height: 1.5;
-  border-bottom: 1px solid var(--border);
 }
 
 .st__node {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cardbuddy",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Local dev service for the CardBuddy card editor — decouples card CRUD (sync/save/validate/render-status/screenshot) from the static public editor, so the editor can be deployed to any static host while each developer runs a local service against their own card source.",
   "type": "module",
   "bin": {