cardbuddy 0.7.0 → 0.8.0

package/dist/vendored/styles/app.css

@@ -64,6 +64,9 @@
   --scrim: rgba(0, 0, 0, 0.55);
   --scrim-soft: rgba(0, 0, 0, 0.45);
   --scrim-faint: rgba(0, 0, 0, 0.4);
+  /* 模态模糊遮罩（深浅主题统一，不随主题翻转）：确认框 / 网格预览 / 添加组件 / 远端预览 / 登录框共用 */
+  --scrim-modal: rgba(8, 10, 16, 0.55);
+  --scrim-modal-blur: 2px;
   /* 顶栏渐变、分隔条、分隔条抓手微光、白色叠加微光 */
   --bar-grad: linear-gradient(180deg, #171a20, #131519);
   --splitter: #5b6cff;
@@ -878,14 +881,24 @@ body {
   min-height: 0;
 }
 .workside__bar {
+  flex: 0 0 auto;
+  order: 2;
+}
+/* 底部弹出面板容器（运行态 / 事件 / 绑定错误）：Teleport 目标，宽度贯穿中右两栏；
+   空容器（面板均 v-show 隐藏时）高度为 0，不占位 */
+.workside__panels {
   flex: 0 0 auto;
   order: 1;
+  display: flex;
+  flex-direction: column;
 }
 .workside__cols {
   flex: 1 1 auto;
   display: flex;
   min-width: 0;
   min-height: 0;
+  /* 绝对定位 splitter 的定位上下文：分隔条只贯穿两栏区高度，不穿过底部面板 / 状态栏 */
+  position: relative;
 }
 
 .phone {
@@ -920,12 +933,13 @@ body {
   flex-direction: column;
 }
 
-/* 拖拽分隔条：覆盖在预览列与调试面板的接缝上，绝对定位不占布局宽度 */
+/* 拖拽分隔条：覆盖在接缝上，绝对定位不占布局宽度（命中宽 6px → 两侧各压 3px）。
+   左条定位上下文为 .app__stage：预览列 | 工作区 的缝贯穿底面板 / 状态栏左缘，通到底部全程可拖；
+   右条（.splitter--api）定位上下文为 .workside__cols：该缝在底面板区域不存在，只贯穿列区高度。 */
 .splitter {
   position: absolute;
   top: 0;
   bottom: 0;
-  /* 以预览列右缘为接缝居中覆盖（宽 6px → 两侧各压 3px），不挤占实际宽度 */
   left: calc(var(--preview-width) - 3px);
   width: 6px;
   cursor: col-resize;
@@ -937,9 +951,22 @@ body {
   left: auto;
   right: calc(var(--api-panel-width, 360px) - 3px);
 }
-.splitter:hover,
-.splitter.is-dragging {
+/* 拖拽高亮统一规格：左 / 右竖向分隔条与底部面板头部横向拖拽条，hover / 拖拽中一律
+   显示 2px 的 --splitter 高亮线（同色同粗细）；竖条命中区仍为 6px，高亮只画居中 2px */
+.splitter::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 1.5px;
+  width: 3px;
   background: var(--splitter);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.splitter:hover::after,
+.splitter.is-dragging::after {
+  opacity: 1;
 }
 /* 拖拽中：禁用文本选择，全局保持 col-resize 光标 */
 .phone--dragging,
@@ -1200,6 +1227,40 @@ body {
   overflow: auto;
   padding: 8px 12px;
 }
+/* 通用空状态占位（API 调用面板 / 卡片来源 tab 复用）：徽章 + 图标 + 文案 + 弱提示，垂直居中 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 56px 16px;
+  color: var(--text-faint);
+}
+/* 虚线圆形徽章：复用全局弱态配色（bg-hover 底 + 虚线描边），内嵌 20px 线性图标（插头/云等，随场景） */
+.empty-state__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--bg-hover);
+  border: 1px dashed var(--border-strong);
+  color: var(--text-faint);
+}
+.empty-state__badge svg {
+  width: 20px;
+  height: 20px;
+}
+.empty-state__hint {
+  margin: 0;
+  max-width: 240px;
+  color: var(--text-faint);
+  font-size: 11px;
+  line-height: 1.6;
+  text-align: center;
+}
 .debug__tabs {
   display: flex;
   border-bottom: 1px solid var(--border);
@@ -1252,7 +1313,10 @@ body {
 }
 .debug__meta {
   margin: 0;
-  padding: 8px 12px;
+  padding: 8px 12px 0; /* 底部留白交给 hint 页脚，保证贴底无缝 */
+  display: flex;
+  flex-direction: column;
+  min-height: 100%; /* 内容不足一屏时也能把 hint 推到面板底部 */
 }
 .debug__empty {
   color: var(--text-faint);
@@ -1298,8 +1362,12 @@ body {
   font-size: 12px;
 }
 .debug__meta-hint {
-  margin-top: 12px;
-  padding-top: 10px;
+  /* 固定在面板底部：内容短时由 margin-top:auto 推底；内容超长滚动时 sticky 吸底不随列表滚走 */
+  position: sticky;
+  bottom: 0;
+  margin: auto -12px 0;
+  padding: 10px 12px;
+  background: var(--bg-panel);
   border-top: 1px solid var(--border);
   color: var(--text-faint);
   font-size: 12px;
@@ -1312,14 +1380,14 @@ body {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
+  /* 顶缘拖拽条 .panelhead__edge 的定位上下文 */
+  position: relative;
   /* 初始高度 240px；运行时由头部拖拽调整，并通过 JS 持久化回写 height */
   height: 240px;
   min-height: 120px;
   max-height: 60vh;
   /* hidden 避免面板自身出现滚动条（滚动交给 .statepanel__tree） */
   overflow: hidden;
-  /* 通过 flex order 把面板固定到状态栏之上，确保状态栏始终贴底（不被面板顶上来） */
-  order: 1;
   background: var(--bg-panel);
   border-top: 1px solid var(--border-strong);
 }
@@ -1330,13 +1398,37 @@ body {
   gap: 8px;
   height: var(--ctrl-lg);
   padding: 0 12px;
-  background: var(--bg-bar);
   border-bottom: 1px solid var(--border);
   font-size: 13px;
   color: var(--text);
-  /* 头部即拖拽手柄（无专门节点）：整条可抓取，向上拖放大面板 */
+}
+/* 底面板顶缘拖拽条：与竖向分隔条同一规格——命中 6px、高亮 3px --splitter；
+   仅鼠标进入分割边缘才触发高亮 / 拖拽，头部本体不再响应（面板 overflow:hidden，
+   高亮线贴缝内侧 0~3px 绘制）。拖拽中经 is-dragging 保持高亮。 */
+.panelhead__edge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
   cursor: row-resize;
   user-select: none;
+  z-index: var(--z-sticky);
+}
+.panelhead__edge::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 3px;
+  background: var(--splitter);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.panelhead__edge:hover::after,
+.panelhead__edge.is-dragging::after {
+  opacity: 1;
 }
 .statepanel__title {
   font-weight: 600;
@@ -1345,27 +1437,34 @@ body {
 .statepanel__title code {
   font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
-  color: var(--accent);
+  /* 与 .debug__meta-row code 同一芯片语言：浅底 + 弱文字色，不用 accent 抢焦 */
+  color: var(--text-dim);
+  background: var(--bg-hover);
+  padding: 1px 5px;
+  border-radius: 4px;
 }
 .statepanel__close {
   margin-left: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: none;
   border: none;
-  color: var(--text-faint);
-  font-size: 15px;
-  line-height: 1;
+  color: var(--text-dim);
   cursor: pointer;
-  transition: color 0.15s;
+  border-radius: var(--radius-xs);
+  transition: background 0.15s, color 0.15s;
 }
 .statepanel__close:hover {
+  background: var(--bg-hover);
   color: var(--text);
 }
+.statepanel__close svg {
+  display: block;
+}
 .statepanel__tree {
   flex: 1 1 auto;
   overflow: auto;
@@ -1402,21 +1501,66 @@ body {
   padding: 0;
 }
 .debug__item {
-  padding: 4px 8px;
+  padding: 9px 11px;
   margin-bottom: 6px;
   border-radius: 8px;
   font-size: 12px;
   line-height: 1.6;
-  word-break: break-all;
+  /* break-all 会把键名/标识符拦腰拆行（msg → ms/g）；anywhere 仅在单词真放不下时才断 */
+  word-break: normal;
+  overflow-wrap: anywhere;
 }
 .debug__item--err {
-  background: var(--danger-soft);
+  display: grid;
+  grid-template-columns: 52px 84px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 0;
+  padding: 3px 12px 3px 10px;
+  border-radius: 0;
+  /* 左侧红条标示错误归属；行底透明避免整片红块，hover 才整行染 danger 色 */
+  border-left: 2px solid var(--danger);
+  border-bottom: 1px solid var(--border);
+  background: transparent;
   color: var(--err-item-fg);
+  font-size: 11px;
+  line-height: 1.45;
+  word-break: normal;
+}
+.debug__item--err:last-child {
+  border-bottom: none;
+}
+.debug__item--err:hover {
+  background: var(--danger-soft);
+}
+/* 错误类型列：等宽小标签，超长省略 */
+.debug__item--err .debug__kind {
+  overflow: hidden;
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 10px;
+  color: var(--danger);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 1;
+}
+.err__msg {
+  min-width: 0;
+  word-break: break-word;
 }
 .debug__item--api {
   border: 1px solid var(--api-item-border);
   color: var(--api-item-fg);
   background: var(--api-item-bg);
+  margin-bottom: 8px;
+}
+.debug__item--api:last-child {
+  margin-bottom: 0;
+}
+/* 方法名与下方代码树同语言：等宽 + 显式行高（规范手册 6.2） */
+.debug__item--api .debug__kind {
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.6;
 }
 .debug__kind {
   font-weight: 600;
@@ -1481,12 +1625,27 @@ body {
 .apt__branch,
 .apt__leaf {
   display: flex;
-  align-items: center;
+  /* 值折行时键名/冒号保持首行对齐，center 会让它们悬在多行值的垂直中部 */
+  align-items: baseline;
   gap: 4px;
   padding: 1px 4px;
   border-radius: 4px;
   cursor: pointer;
 }
+/* 冒号贴键（DevTools 风格）：抵消与键之间的 flex gap，值仍保留 4px 间隔 */
+.apt .jt__colon {
+  margin-left: -4px;
+}
+/* 键名不参与 flex 收缩：否则长值会把小 basis 的键列按比例挤到拦腰换行（msg → ms/g）；
+   折行只应发生在值上（值已 min-width:0 + overflow-wrap:anywhere） */
+.apt .jt__key {
+  flex-shrink: 0;
+}
+/* 值/摘要允许在剩余宽度内折行：解除 flex 项 min-content 下限 */
+.apt .jt__val,
+.apt .jt__preview {
+  min-width: 0;
+}
 .apt__branch:hover,
 .apt__leaf:hover {
   background: var(--bg-hover);
@@ -1545,36 +1704,68 @@ body {
   overflow: auto;
 }
 .debug__scope-foot {
-  flex: 0 0 auto;
   position: absolute;
-  bottom: 0;
-  right: 0;
+  bottom: 10px;
+  right: 10px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
+  /* 悬浮操作条：卡片容器 + 投影，与滚动内容分层，不再“贴”在树内容上 */
+  padding: 6px;
+  background: var(--bg-bar);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
 }
 .debug__copied {
+  margin: 0 4px 0 8px;
   font-size: 12px;
   color: var(--accent);
 }
+/* 次级按钮：中性描边 + 弱文本色，hover 提亮 */
 .debug__copy {
   display: inline-flex;
   align-items: center;
-  height: var(--ctrl-sm);
-  padding: 0 14px;
+  gap: 5px;
+  height: 26px;
+  padding: 0 10px;
   background: var(--bg-input);
-  color: var(--text);
-  border: 1px solid var(--accent-border);
-  border-radius: var(--radius-sm);
-  font-size: 13px;
+  color: var(--text-dim);
+  border: 1px solid var(--border-strong);
+  border-radius: 7px;
+  font-size: 12px;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 .debug__copy:hover {
   background: var(--bg-hover);
-  border-color: var(--accent);
+  border-color: var(--accent-border);
+  color: var(--text);
+}
+.debug__copy-icn {
+  flex: 0 0 auto;
+  width: 13px;
+  height: 13px;
+}
+/* 主按钮（应用）：常态与其他边线按钮一致，hover 转绿色系（ok）提示“提交/生效”语义 */
+.debug__copy--primary:hover {
+  background: var(--ok-soft);
+  border-color: var(--ok-border);
+  color: var(--ok);
+}
+/* 丢弃类次级按钮：hover 转 warn 色提示破坏性（重置丢弃内存编辑） */
+.debug__copy--warn:hover {
+  background: var(--warn-soft);
+  border-color: var(--warn-border);
+  color: var(--warn);
+}
+/* 按钮分组间的竖向分隔线 */
+.debug__sep {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background: var(--border-strong);
 }
 
 /* 数据绑定 Raw 模式：直接复用 .debug__scope-wrap 的绝对定位盒（inset 已占满 body 内容区），
@@ -1717,12 +1908,12 @@ body {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
+  /* 顶缘拖拽条 .panelhead__edge 的定位上下文 */
+  position: relative;
   height: 240px;
   min-height: 120px;
   max-height: 60vh;
   overflow: hidden;
-  /* 与运行态面板同属「状态栏之上的底部面板」，固定 order 确保状态栏始终贴底 */
-  order: 2;
   background: var(--bg-panel);
   border-top: 1px solid var(--border-strong);
 }
@@ -1733,10 +1924,6 @@ body {
   gap: 8px;
   height: var(--ctrl-lg);
   padding: 0 12px;
-  background: var(--bg-bar);
-  /* 头部即拖拽手柄（无专门节点）：整条可抓取，向上拖放大面板 */
-  cursor: row-resize;
-  user-select: none;
   border-bottom: 1px solid var(--border);
   font-size: 13px;
   color: var(--text);
@@ -1757,18 +1944,23 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: none;
   border: none;
-  color: var(--text-faint);
+  color: var(--text-dim);
   cursor: pointer;
-  transition: color 0.15s;
+  border-radius: var(--radius-xs);
+  transition: background 0.15s, color 0.15s;
 }
 .errpanel__iconbtn:hover:not(:disabled) {
+  background: var(--bg-hover);
   color: var(--text);
 }
+.errpanel__iconbtn svg {
+  display: block;
+}
 .errpanel__iconbtn:disabled {
   opacity: 0.35;
   cursor: not-allowed;
@@ -1777,33 +1969,100 @@ body {
 .errpanel__clear:hover:not(:disabled) {
   color: var(--danger);
 }
+/* 事件面板 tab 条：日志 / 错误 二选一，并入头部单行（标题之后、操作按钮之前）。
+   沿用 .debug__tabs 视觉语言（选中项 accent 短下划线，落到头部底发丝线上），
+   与头部同高，不再单独占一行面板高度。 */
+.errpanel__tabs {
+  flex: 0 0 auto;
+  align-self: stretch;
+  display: flex;
+  align-items: stretch;
+  gap: 2px;
+  margin-left: 4px;
+}
+.errpanel__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 100%;
+  padding: 0 10px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.errpanel__tab:hover {
+  color: var(--text);
+}
+.errpanel__tab--active {
+  color: var(--accent);
+}
+.errpanel__tab--active::after {
+  content: '';
+  position: absolute;
+  left: 20%;
+  right: 20%;
+  bottom: -1px;
+  height: 2px;
+  background: var(--accent);
+}
+/* tab 计数小药丸：错误侧计数非 0 时转红，不切 tab 也能看出那边有货 */
+.errpanel__tab-count {
+  min-width: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--bg-hover);
+  color: var(--text-faint);
+  font-size: 11px;
+  line-height: 15px;
+  text-align: center;
+}
+.errpanel__tab--active .errpanel__tab-count {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.errpanel__tab-count.is-hit,
+.errpanel__tab--active .errpanel__tab-count.is-hit {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
 .errpanel__body {
   flex: 1 1 auto;
   overflow: auto;
-  padding: 12px 16px;
+  /* 行贴边排布（行自带左右内边距），把竖向空间全部留给内容 */
+  padding: 4px 0 6px;
 }
-/* 事件面板内「日志 / 错误」分区标题 */
-.ep__sec-title {
-  margin: 8px 0 6px;
-  padding-bottom: 4px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-dim);
-  border-bottom: 1px dashed var(--border);
+/* 空态占位（复用 API 调用面板 .empty-state 语言）：底部面板高度有限，
+   压缩留白与徽章尺寸，避免空态自身撑出滚动条 */
+.errpanel__body .empty-state {
+  padding: 20px 16px;
+  gap: 8px;
 }
-.ep__sec-title:first-child {
-  margin-top: 0;
+.errpanel__body .empty-state__badge {
+  width: 40px;
+  height: 40px;
+}
+.errpanel__body .empty-state__badge svg {
+  width: 18px;
+  height: 18px;
+}
+.errpanel__body .empty-state__hint {
+  max-width: 460px;
 }
-/* 事件面板日志：每行 = 等级标签 + 内容（语法高亮 / JSON 折叠） */
+/* 事件面板日志：控制台风格高密度行 = 时间 | 等级 | 内容，发丝线分隔 */
 .debug__list--log {
   display: flex;
   flex-direction: column;
 }
 .log__item {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 6px 8px;
+  display: grid;
+  grid-template-columns: 52px 44px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px;
+  padding: 2px 12px;
   border-bottom: 1px solid var(--border);
 }
 .log__item:last-child {
@@ -1812,31 +2071,40 @@ body {
 .log__item:hover {
   background: var(--bg-input);
 }
-/* 等级标签：小药丸，按级别着色 */
+/* 行首时间戳：tabular-nums 保证整列对齐 */
+.log__time,
+.err__time {
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-faint);
+}
+/* 等级标签：无边框小药丸，定宽成列对齐 */
 .log__tag {
-  flex: 0 0 auto;
-  margin-top: 1px;
-  padding: 1px 6px;
-  border-radius: 4px;
+  justify-self: start;
+  padding: 0 5px;
+  border: none;
+  border-radius: 3px;
   font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 600;
-  line-height: 1.5;
+  line-height: 14px;
   text-transform: uppercase;
-  letter-spacing: 0.4px;
+  letter-spacing: 0.3px;
   color: var(--text-dim);
-  background: var(--bg-input);
-  border: 1px solid var(--border);
+  background: var(--bg-hover);
+}
+.log__tag--info {
+  color: var(--accent);
+  background: var(--accent-soft);
 }
 .log__tag--warn {
   color: var(--log-warn-fg);
   background: var(--log-warn-bg);
-  border-color: var(--log-warn-border);
 }
 .log__tag--error {
   color: var(--danger);
   background: var(--danger-soft);
-  border-color: var(--danger-soft);
 }
 /* 内容区：基础类型内联、复合类型独占整行 */
 .log__content {
@@ -1845,10 +2113,10 @@ body {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  gap: 4px 10px;
+  gap: 3px 8px;
   font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.5;
+  font-size: 11px;
+  line-height: 1.45;
   color: var(--text);
 }
 .log__val {
@@ -1857,7 +2125,23 @@ body {
 }
 .log__json {
   flex: 1 1 100%;
-  padding: 2px 0;
+  padding: 0;
+}
+/* 日志内嵌 JSON 树比接口面板再紧一档，去掉多余上下留白 */
+.log__json .apt {
+  margin-top: 0;
+  font-size: 11px;
+  line-height: 1.4;
+}
+/* 根摘要行可点：hover 给底色提示；展开后明细列表缩进一级 */
+.log__json .apt__branch--root {
+  cursor: pointer;
+  border-radius: 4px;
+}
+.log__json .apt__list--nested {
+  margin-left: 4px;
+  padding-left: 14px;
+  border-left: 1px solid var(--border);
 }
 .log__empty {
   color: var(--text-faint);
@@ -2274,8 +2558,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(8, 10, 16, 0.55);
-  backdrop-filter: blur(2px);
+  background: var(--scrim-modal);
+  backdrop-filter: blur(var(--scrim-modal-blur));
 }
 .rp-card {
   width: 300px;
@@ -2456,8 +2740,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(8, 10, 16, 0.55);
-  backdrop-filter: blur(2px);
+  background: var(--scrim-modal);
+  backdrop-filter: blur(var(--scrim-modal-blur));
 }
 .login-modal {
   width: 320px;
@@ -2556,8 +2840,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(8, 10, 16, 0.55);
-  backdrop-filter: blur(2px);
+  background: var(--scrim-modal);
+  backdrop-filter: blur(var(--scrim-modal-blur));
 }
 .confirm-modal {
   width: 360px;