modelstage 0.0.0-stage → 0.5.24

package/src/web/debug/panel.css

@@ -0,0 +1,474 @@
+/* ============================================================================
+   debug-panel.css —— 调试日志浮层面板样式
+   布局：两行标题（第1行 标题+收起 ／ 第2行 四档+上传+清空）+ 列表。
+   结构对齐 docs/设计/调试日志面板.md：288px 宽 / 最高 320px / 圆角 12px /
+   卡片底 + 边框 + 阴影；头部 图标+标题+条数+两个图标按钮；列表最高 256px 可滚动；
+   条目 = 级别图标 + 元信息（时间 + [tag]）+ 正文；级别用底色 10% + 文字着色。
+   颜色全部走 token（在 .dbg-panel 作用域内定义，优先级：站点既有 CSS 变量 → 兜底值），
+   换主题时只需要改这一处。
+   ========================================================================== */
+
+/* ── 尺寸常量（改这里就够，别在别处写死）──
+   高度**只在一个地方定义**：下面 .dbg-shell-inner 的 height: var(--dbg-h)。
+   曾经的坑：.dbg-panel 自己写死 max-height:320 + overflow:hidden，而列表按另一套算出 353，
+   两个高度源不一致 ⇒ 列表底部 34px 被外层裁掉，滚到底也看不见最后一条的尾行。
+   所以外层容器只负责定位，既不写死高度也不加 overflow:hidden。 */
+:root {
+  --dbg-w: 320px;        /* 面板宽度 */
+  --dbg-h: 420px;        /* 面板总高 */
+  --dbg-h-head: 36px;    /* 第 1 行高 */
+  --dbg-h-bar: 34px;     /* 第 2 行高 */
+  /* 列表可视高度 = --dbg-h − --dbg-h-head − --dbg-h-bar（自动算，不用手改） */
+  --dbg-row-pad: 4px 8px;
+  --dbg-row-gap: 4px;
+  --dbg-pill-h: 28px;
+  --dbg-pill-offset: 16px;
+  /* 收起态的**盒子**尺寸（含边框）：定位时按它算，不用等 220ms 宽度过渡结束。
+     114 = 胶囊实测宽 112 + 左右边框各 1；不留余量，避免"锚点与视觉差 8px"。 */
+  --dbg-pill-w: 114px;
+  --dbg-pill-hbox: 30px;
+}
+
+.dbg-panel {
+  --dbg-card: var(--color-card, #1f2326);
+  --dbg-border: var(--color-border, #353a3e);
+  --dbg-fg: var(--color-foreground, #e9ebed);
+  --dbg-muted: var(--color-muted-foreground, #9ca3af);
+  --dbg-primary: var(--color-primary, #1fc0c5);
+  --dbg-warn: var(--color-warning, #f59e0b);
+  --dbg-error: var(--color-destructive, #e06c75);
+  --dbg-radius: 12px;
+  --dbg-accent: 10%;
+
+  position: fixed;
+  right: 16px;
+  /* 抬到播放条上方：播放条高 42px + 距底 15px，再留 19px 间隙 */
+  bottom: 76px;
+  z-index: 60;
+  /* 宽度跟常量；高度交给 .dbg-shell-inner（唯一高度源） */
+  width: var(--dbg-w);
+  display: flex;
+  flex-direction: column;
+  /* 关键：外层不能裁切，否则会把列表底部切掉（顶部定位靠 right/bottom，不靠 overflow） */
+  overflow: visible;
+  border: 1px solid var(--dbg-border);
+  border-radius: var(--dbg-radius);
+  background: var(--dbg-card);
+  color: var(--dbg-fg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
+  transform-origin: right bottom;
+  /* 收起/展开时宽度一并过渡：收起后只剩胶囊，宽度要跟着收（否则 width:auto 会被
+     仍在布局里的列表内容撑到 600+，胶囊看着像一条长条）。fixed 元素动 width 不影响页面布局。 */
+  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* 关闭调试日志时只是隐藏（实例保留），作者样式里的 display:flex 会盖掉 [hidden]，故显式声明 */
+.dbg-panel[hidden] {
+  display: none;
+}
+
+/* ---------------------------------------------------------------- 收起 / 展开
+   收起后由右下角一颗胶囊按钮承载：info 图标 + 「日志」 + 计数徽标 + chevron-up。
+   动画口径（契约 docs/契约/交互与实现约束.md：只用 CSS transition，不写 element.style）：
+     · 高度用 grid 的 0fr ↔ 1fr（height:auto 不能 transition，也不必猜固定高度）
+     · 配合 opacity + 轻微位移/缩放，从右下角"长出来"（transform-origin: right bottom）
+     · 收起态 pointer-events:none，防止对着空气点
+   曲线 cubic-bezier(.16,1,.3,1) 是这类"先快后缓、不过冲"手感的标准值。 */
+.dbg-panel[data-collapsed='true'] {
+  width: var(--dbg-pill-w);
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.dbg-shell {
+  /* 动画外壳：只负责裁切 + 透明度 + 位移。
+     高度动画放在内层（见 .dbg-shell-inner）：内层是**固定高度**的，
+     grid 轨道 0fr 在"子项有明确 height"时压不下去（实测轨道仍是 420px），
+     所以直接过渡 height 更可靠，也不影响"高度只有一个常量源"这条约束。 */
+  overflow: hidden;
+  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: right bottom;
+}
+
+/* 唯一子项：既是**唯一高度源**（height: var(--dbg-h)），也是三行网格。
+   min-height:0 让外层动画外壳的 0fr 轨道能压下去；overflow:hidden 只裁"收起动画过程"，
+   不与外层裁切冲突（外层 .dbg-panel 已改成 overflow:visible）。 */
+.dbg-shell-inner {
+  display: grid;
+  grid-template-rows: var(--dbg-h-head) var(--dbg-h-bar) 1fr;
+  height: var(--dbg-h);
+  min-height: 0;
+  overflow: hidden;
+  transition: height 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.dbg-panel[data-collapsed='true'] .dbg-shell {
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+  pointer-events: none;
+}
+
+/* 收起 = 高度归零（高度源仍是 --dbg-h，这里只是把它压到 0 做过渡） */
+.dbg-panel[data-collapsed='true'] .dbg-shell-inner {
+  height: 0;
+}
+
+/* ---- 收起态胶囊 ---- */
+.dbg-pill {
+  display: none;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--dbg-border);
+  border-radius: 999px;
+  background: var(--dbg-card);
+  color: var(--dbg-fg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  line-height: 1.2;
+  cursor: pointer;
+  /* 胶囊本身就是拖拽手柄：触屏上别让浏览器把拖动手势解释成滚页面 */
+  touch-action: none;
+  user-select: none;
+  transition: background-color 150ms ease, border-color 150ms ease;
+}
+
+.dbg-panel[data-collapsed='true'] .dbg-pill {
+  display: inline-flex;
+  width: fit-content;
+  /* 默认贴右（向左长 ⇒ 胶囊贴在面板右边缘）。向右长时由下面的 data-open-dir 改贴左，
+     保证"胶囊留在原处、面板朝视口中心长"。 */
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+/* 展开方向 → 胶囊贴在面板的哪条边（位置不变的关键） */
+.dbg-panel[data-open-dir$='right'] .dbg-pill {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+/* 向上长 ⇒ 收起态胶囊贴面板下边缘（展开时 root 无多余空间，此规则无副作用） */
+.dbg-panel[data-open-dir^='up'] {
+  justify-content: flex-end;
+}
+
+.dbg-pill:hover {
+
+  background: color-mix(in srgb, var(--dbg-fg) 8%, var(--dbg-card));
+}
+
+/* 胶囊里的 info 图标用主色 */
+.dbg-pill .dbg-icon-info {
+  width: 14px;
+  height: 14px;
+  color: var(--dbg-primary);
+}
+
+.dbg-pill-text { color: var(--dbg-fg); }
+
+/* 计数徽标：主色 10% 底 + 主色字 + 10px */
+.dbg-pill-count {
+  padding: 0 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--dbg-primary) 12%, transparent);
+  color: var(--dbg-primary);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.dbg-pill .dbg-icon-chevron { width: 12px; height: 12px; color: var(--dbg-muted); }
+
+/* ---------------------------------------------------------------- 头部 */
+
+.dbg-head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  /* 行高由 --dbg-h-head 决定，所以这里不写上下内边距（写了会把行撑高、与常量不一致） */
+  padding: 0 8px;
+  min-width: 0;
+  border-bottom: 1px solid var(--dbg-border);
+  /* 标题栏是拖动抓手：给抓取光标，拖动时禁用文本选中（否则会选中标题文字） */
+  cursor: grab;
+  user-select: none;
+}
+
+.dbg-panel.is-dragging,
+.dbg-panel.is-dragging * { cursor: grabbing !important; }
+
+/* 拖动期间：提到合成层（改 transform 不重排），并关掉过渡避免跟手出现"追帧"延迟 */
+.dbg-panel.is-dragging {
+  transition: none;
+  will-change: transform;
+}
+
+/* 标题栏是抓手：触屏上不让浏览器把拖动解释成滚页面，否则手感会"跟不上" */
+.dbg-head { touch-action: none; }
+
+/* 第 1 行左侧：可压缩（min-width:0 才能缩，否则内容会把右侧按钮挤出去） */
+.dbg-head-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.dbg-head-left .dbg-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--dbg-primary);
+}
+
+.dbg-title {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.dbg-count {
+  font-size: 12px;
+  color: var(--dbg-muted);
+}
+
+/* 收起按钮：flex:none ⇒ 永远不被挤出右边界（曾经溢出 6px 点不到） */
+.dbg-collapse {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dbg-muted);
+  cursor: pointer;
+}
+
+.dbg-collapse:hover {
+  background: color-mix(in srgb, var(--dbg-fg) 8%, transparent);
+  color: var(--dbg-fg);
+}
+
+.dbg-collapse .dbg-icon { width: 14px; height: 14px; }
+
+/* ---------------------------------------------------------------- 第 2 行：四档 + 操作 */
+
+.dbg-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 8px 6px;
+  min-width: 0;
+}
+
+/* 四档：横排小按钮（不是下拉）。下拉只能表达"某档及以上"，而人要的是任意组合。 */
+.dbg-levels,
+.dbg-acts {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.dbg-acts { flex: none; }
+
+.dbg-lv,
+.dbg-act {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--dbg-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dbg-muted);
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
+}
+
+.dbg-lv .dbg-icon,
+.dbg-act .dbg-icon { width: 12px; height: 12px; }
+
+/* 激活态：与右边栏同款（主色描边 + 主色淡底 + 主色字） */
+.dbg-lv.is-on {
+  border-color: var(--dbg-primary);
+  background: color-mix(in srgb, var(--dbg-primary) 12%, transparent);
+  color: var(--dbg-primary);
+}
+
+.dbg-lv:hover,
+.dbg-act:hover {
+  background: color-mix(in srgb, var(--dbg-fg) 8%, transparent);
+  color: var(--dbg-fg);
+}
+
+.dbg-lv.is-on:hover {
+  background: color-mix(in srgb, var(--dbg-primary) 18%, transparent);
+}
+
+.dbg-act:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* ---------------------------------------------------------------- 列表 */
+
+.dbg-list {
+  /* grid 子项默认 min-height:auto 会撑破轨道 ⇒ 必须显式 0，滚动才发生在列表自己身上 */
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px;
+  /* 底部留一点：最后一条不贴边（可视高度由 --dbg-h 三个常量算出，不在这里写死） */
+  padding-bottom: calc(var(--dbg-row-gap) * 2);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.dbg-list[hidden] {
+  display: none;
+}
+
+/* 单条：横向 flex、圆角、内边距，级别底色 10% */
+.dbg-row {
+  display: flex;
+  gap: 8px;
+  padding: var(--dbg-row-pad);
+  border-radius: 4px;
+}
+
+.dbg-row-info {
+  background: color-mix(in srgb, var(--dbg-primary) var(--dbg-accent), transparent);
+}
+
+.dbg-row-warn {
+  background: color-mix(in srgb, var(--dbg-warn) var(--dbg-accent), transparent);
+}
+
+.dbg-row-error {
+  background: color-mix(in srgb, var(--dbg-error) var(--dbg-accent), transparent);
+}
+
+/* 级别图标：14px、顶部对齐 */
+.dbg-level-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  margin-top: 2px;
+}
+
+.dbg-row-info .dbg-level-icon { color: var(--dbg-primary); }
+.dbg-row-warn .dbg-level-icon { color: var(--dbg-warn); }
+.dbg-row-error .dbg-level-icon { color: var(--dbg-error); }
+
+.dbg-body {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/* 元信息行：时间（等宽数字）+ [tag]（小写存储，靠 CSS 转大写） */
+.dbg-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10px;
+  color: var(--dbg-muted);
+}
+
+.dbg-time {
+  font-variant-numeric: tabular-nums;
+}
+
+.dbg-tag {
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  opacity: 0.8;
+}
+
+/* 正文：按级别着色，长文本换行 */
+.dbg-text {
+  font-size: 12px;
+  line-height: 1.45;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.dbg-text-info { color: var(--dbg-primary); }
+.dbg-text-warn { color: var(--dbg-warn); }
+.dbg-text-error { color: var(--dbg-error); }
+
+/* ---------------------------------------------------------------- 来源徽标 / 级别过滤 */
+
+/* 来源：应用(app) / 异常(error) / 网络(net) / 资源(resource) / 其它原样 */
+.dbg-src {
+  display: inline-block;
+  min-width: 44px;
+  padding: 0 4px;
+  border-radius: 3px;
+  font-size: 10px;
+  line-height: 14px;
+  text-align: center;
+  text-transform: lowercase;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--dbg-muted);
+}
+.dbg-src-app { background: rgba(120, 200, 255, 0.16); color: #9fd4ff; }
+.dbg-src-error { background: rgba(255, 120, 120, 0.18); color: #ff9d9d; }
+.dbg-src-net { background: rgba(255, 200, 90, 0.18); color: #ffd08a; }
+.dbg-src-resource { background: rgba(200, 150, 255, 0.18); color: #d3b3ff; }
+
+/* 级别过滤：与头部按钮同高，避免撑开面板 */
+/* ---------------------------------------------------------------- 空态 */
+
+.dbg-empty {
+  padding: 32px 8px;
+  text-align: center;
+  color: var(--dbg-muted);
+  opacity: 0.6;
+  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+/* ---- 上传日志按钮与三态反馈 ----
+   与其它头部按钮并排，但带文字：这个动作会产生服务端文件，需要让人一眼看懂。
+   uploading 时禁用（aria-busy），成功/失败文案写在 .dbg-upload-status 里，失败可再点重试。 */
+.dbg-upload-status {
+  max-width: 42ch;
+  overflow: hidden;
+  font-size: 12px;
+  color: var(--dbg-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 失败态用错误色，成功态保持弱化文字（不抢条数的视觉位置） */
+.dbg-upload-status[data-state='fail'] {
+  color: var(--color-danger);
+}
+
+/* ---- chevron 朝向与旋转 ----
+   展开态向下（点它会收起）、收起态向上（点它会展开）。
+   两处都带 transition，折叠瞬间能看到箭头"转过去"，而不是瞬切。 */
+.dbg-chevron {
+  transform-origin: center;
+  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.dbg-chevron-head { transform: rotate(0deg); }
+.dbg-chevron-pill { transform: rotate(180deg); }
+
+/* 展开过程中胶囊淡出，同时它的箭头转回向下 —— 视觉上是"同一个箭头翻了个面" */
+.dbg-panel[data-collapsed='false'] .dbg-chevron-pill { transform: rotate(0deg); }