dsh-router-core 0.2.0 → 0.3.1

package/src/client/router.css

@@ -64,17 +64,176 @@
 }
 
 /* ============================================================
-   dsh-router — center-column panel
+   dsh-router — 主题变量（设置页 .dshr-settings / 老中心栏 .dshr-shell 共用）
    ============================================================ */
 
-[data-pane='conversation'] {
-  position: relative;
+.dshr-settings,
+.dshr-shell {
+  --rs-bg: var(--dsw-alias-bg-overlay, var(--dsw-alias-bg-base));
+  --rs-layer-1: var(--dsw-alias-bg-layer-1);
+  --rs-layer-2: var(--dsw-alias-bg-layer-2);
+  --rs-input: var(--dsw-specific-input-major, var(--dsw-alias-bg-layer-2));
+  --rs-text: var(--dsw-alias-label-primary);
+  --rs-muted: var(--dsw-alias-label-secondary);
+  --rs-faint: var(--dsw-alias-label-tertiary);
+  --rs-line: var(--dsw-alias-border-l1);
+  --rs-line-strong: var(--dsw-alias-border-l2);
+  --rs-accent: var(--dsw-alias-state-business-primary);
+  --rs-hover: var(--dsw-alias-interactive-bg-hover);
+  --rs-danger: var(--dsw-alias-state-error-primary);
+  --rs-success: var(--dsw-alias-state-success-primary);
+  --rs-ok: var(--rs-success);
+  --rs-warn: #9a6a18;
+  --rs-mono: var(--ds-font-family-code, 'SFMono-Regular', Consolas, monospace);
+  --rs-sans: var(--dsw-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--rs-text);
+  font: 13px/1.55 var(--rs-sans);
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ============================================================
+   dsh-router — 设置页容器（settings.section 座位）
+   ============================================================ */
+
+/* 容器几何（浏览器实测，改之前先量别凭感觉）：
+   - 内容宽 564px（面板 612 − 左右 padding 24）
+   - 外壳 .VOzbGW_options 是 `overflow-y:auto` + `flex:1 1 0%`，高度确定
+     （视口 813 时可视高 703~746）
+   - 根节点外面套了一层 display:contents（宿主 slot renderer 给的），**没有
+     盒子** —— 但实测 `height:100%` 仍能穿过它解析到外壳高度
+     （验过：root 从 1332px 溢出态变成 722px，正好填满容器）
+
+   布局规则：**tab 条固定，只有下面的内容区滚**。
+   所以根节点必须限高（不限高内容会把外壳撑开，变成整页滚），内容区再
+   min-height:0 + overflow-y:auto 自己滚。
+   关键字是 min-height:0 —— flex 子项默认 min-height:auto，不给 0 的话
+   子项缩不小，overflow 永远不触发。 */
+.dshr-settings {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.dshr-settings *,
+.dshr-settings *::before,
+.dshr-settings *::after { box-sizing: border-box; }
+
+/* 主导航 = tab 条。照 DSH 原生的内容区 tab（插件页那套 pbvGtq_tab）：
+   容器一条 1px 底部分隔线，激活项用 ::after 画 2px 下划线压在线上。
+   刻意**不用**填充色块——那会跟下面的周期按钮组撞成同一种控件，
+   层级也反了（导航是页面级，周期是筛选级）。 */
+.dshr-tabs {
+  display: flex;
+  flex: none;          /* 固定：内容区滚，tab 条不动 */
+  align-items: center;
+  gap: 4px;
+  border-bottom: 1px solid var(--rs-line);
+  /* 右端跟卡片对齐（实测数字，别凭感觉调）：
+       root = 564；内容区因 padding-right 8px → 内容可视宽 556；
+       卡片再贴着可视区排 → 548。
+     tab 条是 .dshr-settings 的直接子项，起点是 root（564），
+     要落到 548 就得让掉 8(padding) + 8(滚动条) = 16px。
+     写成 margin 而不用 padding，是为了不把分隔线画到 padding 区域外。 */
+  margin-right: 16px;
 }
 
-.dshDesktopConversationSurface {
+.dshr-tab {
   position: relative;
+  min-width: 0;
+  height: 36px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 0;
+  color: var(--rs-muted);
+  background: transparent;
+  font-size: 13px;
+  font-weight: 400;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color .12s ease;
+}
+
+.dshr-tab:hover { color: var(--rs-text); }
+
+/* 激活：主文字色 + 2px 下划线（bottom:-1px 压在容器的分隔线上）。
+   双类是因为上面有 `.dshr-settings button { color: inherit; font: inherit }` (1,1)，
+   单类的 .dshr-tab-on 只有 (1,0)，颜色和字号会被吃掉。 */
+.dshr-settings .dshr-tab-on {
+  color: var(--rs-text);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.dshr-settings .dshr-tab-on::after {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  content: '';
+  background: var(--rs-text);
+}
+
+.dshr-tabBack {
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--rs-line);
+  border-radius: 6px;
+  color: var(--rs-muted);
+  background: transparent;
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.dshr-tabBack:hover { color: var(--rs-text); background: var(--rs-hover); }
+
+/* 内容区：吃掉剩余高度并**自己滚**，这样 tab 条永远留在顶部。
+   flex:1 + min-height:0 是必须的（见 .dshr-settings 的注释）。 */
+.dshr-settingsBody {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow-y: auto;
+  /* 恒定预留滚动条槽位。
+     实测不设它时 clientWidth 在 564（内容短、无滚动条）和 556（内容长、有滚动条）
+     之间跳，卡片宽也跟着 556/548 跳 —— 切 tab 时内容会横向抖一下。
+     不支持 scrollbar-gutter 的浏览器只是退化成「照样占宽」，不会坏。 */
+  scrollbar-gutter: stable;
+  /* 右内边距：内容别贴到滚动条上。滚动条宽 8px 且占布局宽度
+     （offsetWidth 564 vs clientWidth 556），不撑开的话内容右边缘正好压在它上面。 */
+  padding-right: 8px;
+}
+
+/* 细滚动条：跟 .dshr-content / .dshr-modalBody 一个套路 */
+.dshr-settingsBody::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.dshr-settingsBody::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: var(--rs-line-strong);
 }
 
+.dshr-settingsBody::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ============================================================
+   dsh-router — 老的中心栏劫持骨架（settings 不可用时的回退，非主路径）
+   ============================================================ */
+
+[data-pane='conversation'] { position: relative; }
+.dshDesktopConversationSurface { position: relative; }
+
 [data-dsh-router-view] {
   position: absolute;
   z-index: 60;
@@ -86,9 +245,7 @@
   background: var(--dsw-alias-bg-overlay, var(--dsw-alias-bg-base));
 }
 
-.dshr-panelView {
-  isolation: isolate;
-}
+.dshr-panelView { isolation: isolate; }
 
 html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]):not([data-dsh-mnemon-active]) [data-dsh-router-view] {
   display: block;
@@ -100,50 +257,37 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
   display: none !important;
 }
 
-/* ============================================================
-   dsh-router — panel shell
-   ============================================================ */
-
 .dshr-shell {
-  --rs-bg: var(--dsw-alias-bg-overlay, var(--dsw-alias-bg-base));
-  --rs-layer-1: var(--dsw-alias-bg-layer-1);
-  --rs-layer-2: var(--dsw-alias-bg-layer-2);
-  --rs-input: var(--dsw-specific-input-major, var(--dsw-alias-bg-layer-2));
-  --rs-text: var(--dsw-alias-label-primary);
-  --rs-muted: var(--dsw-alias-label-secondary);
-  --rs-faint: var(--dsw-alias-label-tertiary);
-  --rs-line: var(--dsw-alias-border-l1);
-  --rs-line-strong: var(--dsw-alias-border-l2);
-  --rs-accent: var(--dsw-alias-state-business-primary);
-  --rs-hover: var(--dsw-alias-interactive-bg-hover);
-  --rs-danger: var(--dsw-alias-state-error-primary);
-  --rs-success: var(--dsw-alias-state-success-primary);
-  --rs-ok: var(--rs-success);
-  --rs-warn: #9a6a18;
-  --rs-mono: var(--ds-font-family-code, 'SFMono-Regular', Consolas, monospace);
-  --rs-sans: var(--dsw-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  box-sizing: border-box;
   display: flex;
   height: 100%;
-  min-width: 0;
   min-height: 0;
   flex-direction: column;
   overflow: hidden;
-  color: var(--rs-text);
   background: var(--rs-bg);
-  font: 13px/1.55 var(--rs-sans);
-  -webkit-tap-highlight-color: transparent;
 }
 
+.dshr-settings *,
+.dshr-settings *::before,
+.dshr-settings *::after,
 .dshr-shell *,
 .dshr-shell *::before,
 .dshr-shell *::after { box-sizing: border-box; }
 
+/* 按钮/表单重置 + 聚焦环：两个挂载容器都要覆盖。
+   只写 .dshr-shell 的话设置页整套控件样式全掉（踩过：周期按钮变裸文字）。 */
+.dshr-settings button,
+.dshr-settings input,
+.dshr-settings select,
+.dshr-settings textarea,
 .dshr-shell button,
 .dshr-shell input,
 .dshr-shell select,
 .dshr-shell textarea { color: inherit; font: inherit; }
 
+.dshr-settings button:focus-visible,
+.dshr-settings input:focus-visible,
+.dshr-settings select:focus-visible,
+.dshr-settings textarea:focus-visible,
 .dshr-shell button:focus-visible,
 .dshr-shell input:focus-visible,
 .dshr-shell select:focus-visible,
@@ -396,6 +540,14 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
   padding: 14px 18px;
 }
 
+/* 设置页里横向 padding 归零：内容区已经贴着容器边，再加 18px 会把卡片挤成
+   1 列、图表也跟着变窄。上下 padding 保留。 */
+.dshr-settings .dshr-modelGrid,
+.dshr-settings .dshr-tableWrap {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .dshr-modelCard {
   display: flex;
   min-width: 0;
@@ -428,13 +580,20 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
    dsh-router — 9router 风格 tab 内容（供应商 / 组合 / 端点与密钥）
    ============================================================ */
 
+/* tab 内容：设置页里**不自己滚** —— 滚动交给 .dshr-settingsBody（tab 条下方
+   那一块）。这里再给 overflow 就会出现嵌套滚动条（内容区一个、tabBody 一个）。
+   老的 .dshr-shell 中心栏挂载方式没有 settingsBody 那层，滚动由它自己承担。 */
 .dshr-tabBody {
   display: flex;
-  flex: 1 1 auto;      /* 填满 content;自身滚动 */
   min-width: 0;
-  min-height: 0;
   flex-direction: column;
   gap: 14px;
+  padding: 0;
+}
+
+.dshr-shell .dshr-tabBody {
+  flex: 1 1 auto;
+  min-height: 0;
   padding: 14px 18px;
   overflow-y: auto;
 }
@@ -845,6 +1004,7 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
 @keyframes dshrModalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
 
 /* 按钮 */
+.dshr-settings .dshr-primaryButton,
 .dshr-shell .dshr-primaryButton {
   display: inline-flex;
   height: 30px;
@@ -862,9 +1022,12 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
   transition: filter .12s ease;
 }
 
+.dshr-settings .dshr-primaryButton:hover,
 .dshr-shell .dshr-primaryButton:hover { filter: brightness(1.08); }
+.dshr-settings .dshr-primaryButton:disabled,
 .dshr-shell .dshr-primaryButton:disabled { opacity: .55; cursor: default; }
 
+.dshr-settings .dshr-dangerButton,
 .dshr-shell .dshr-dangerButton {
   display: inline-flex;
   height: 30px;
@@ -882,6 +1045,7 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
   transition: filter .12s ease;
 }
 
+.dshr-settings .dshr-dangerButton:hover,
 .dshr-shell .dshr-dangerButton:hover { filter: brightness(1.1); }
 
 /* 登录步骤 */
@@ -2103,3 +2267,492 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
   width: 1px;
   background: var(--rs-line);
 }
+
+/* ============================================================
+   dsh-router — 概览（用量看板，9router Overview 风格）
+   ============================================================ */
+
+/* 周期切换 + 操作条 */
+.dshr-statsBar {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.dshr-periods {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--rs-line);
+  border-radius: 8px;
+  background: var(--rs-layer-2);
+}
+
+/* 周期按钮三态（按钮组：一组互斥的筛选按钮，不是导航 tab）。
+   特异性阶梯（类/伪类数 , 元素数）：
+   文件顶部有 `.dshr-settings button { color: inherit; font: inherit }` = (1,1)，
+   单类的 .dshr-period (1,0) 会被它打死（白字、600 字重全丢），所以下面每条
+   都必须带挂载容器（.dshr-settings / .dshr-shell）抬到 (2,0) 以上。
+   **两个容器都要写**：只写 .dshr-shell 的话设置页里这套样式全掉
+   （踩过：周期按钮退化成浏览器默认按钮）。
+   两种 hover 用 :not() 做成互斥，谁赢跟源码顺序无关（免得以后有人挪块就翻车）。 */
+.dshr-settings .dshr-period,
+.dshr-shell .dshr-period {
+  min-width: 46px;
+  height: 26px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 6px;
+  color: var(--rs-muted);
+  background: transparent;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color .12s ease, background .12s ease, filter .12s ease;
+}
+
+/* 未激活悬停：跟 .dshr-miniButton / .dshr-iconButton 一个套路（主文字色 + --rs-hover 底） */
+.dshr-settings .dshr-period:not(.dshr-period-on):hover,
+.dshr-shell .dshr-period:not(.dshr-period-on):hover {
+  color: var(--rs-text);
+  background: var(--rs-hover);
+}
+
+/* 激活：强调色块 + 白字。底色用 layer-1 时跟卡片同色，根本看不出选中了哪个 */
+.dshr-settings .dshr-period-on,
+.dshr-shell .dshr-period-on {
+  color: #fff;
+  background: var(--rs-accent);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgb(0 0 0 / .12);
+}
+
+/* 激活态被悬停：跟 .dshr-primaryButton 一样提亮，表示「它还是能点的」 */
+.dshr-settings .dshr-period-on:hover,
+.dshr-shell .dshr-period-on:hover {
+  color: #fff;
+  background: var(--rs-accent);
+  filter: brightness(1.08);
+}
+
+.dshr-statsBarRight {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.dshr-lifetime {
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+/* 汇总卡（照 9router OverviewCards 的自适应五宫格） */
+.dshr-statGrid {
+  display: grid;
+  flex: none;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+}
+
+.dshr-statCard {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 14px;
+  border: 1px solid var(--rs-line);
+  border-radius: 10px;
+  background: var(--rs-layer-1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
+}
+
+.dshr-statLabel {
+  overflow: hidden;
+  color: var(--rs-faint);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: .03em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.dshr-statValue {
+  overflow: hidden;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -.01em;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+}
+
+.dshr-statHint {
+  color: var(--rs-faint);
+  font-size: 11px;
+}
+
+.dshr-statCard-primary .dshr-statValue { color: var(--rs-accent); }
+.dshr-statCard-ok .dshr-statValue { color: var(--rs-success); }
+.dshr-statCard-warn .dshr-statValue { color: var(--rs-warn); }
+.dshr-statCard-danger .dshr-statValue { color: var(--rs-danger); }
+
+/* 签到卡：跟统计卡同宽同高，但里面是按钮不是数字。
+   gap 沿用卡片的 3px（不覆写）—— 之前改成 6px 让这一行比别的高 6px，
+   两行卡片因此不齐（92 vs 98px）。
+   今日已点过 → 边框转成功色，一眼看出「今天点过了」 */
+.dshr-statCard-checkin { gap: 3px; }
+
+.dshr-statCard-done {
+  border-color: color-mix(in srgb, var(--rs-success) 45%, transparent);
+}
+
+/* 按钮撑满卡片宽度：卡片本来就窄，居左的小按钮看着像没对齐 */
+.dshr-checkinButton {
+  display: inline-flex;
+  width: 100%;
+  /* 26px ≈ .dshr-statValue 的行高（22px × 1.2），让按钮那一行跟数字的
+     那一行一样高，卡片整体高度才跟邻卡一致 */
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border: 1px solid var(--rs-line);
+  border-radius: 6px;
+  color: var(--rs-text);
+  background: var(--rs-layer-2);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color .12s ease, background .12s ease, border-color .12s ease;
+}
+
+.dshr-checkinButton:hover:not(:disabled) {
+  border-color: var(--rs-accent);
+  color: var(--rs-accent);
+  background: color-mix(in srgb, var(--rs-accent) 8%, transparent);
+}
+
+.dshr-checkinButton:disabled { opacity: .6; cursor: default; }
+
+/* 已点过：按钮转成成功色柔和态（仍可再点） */
+.dshr-statCard-done .dshr-checkinButton {
+  border-color: color-mix(in srgb, var(--rs-success) 40%, transparent);
+  color: var(--rs-success);
+  background: color-mix(in srgb, var(--rs-success) 8%, transparent);
+}
+
+/* 结果/失败都压在 hint 那一行里（卡片行数必须跟邻卡一致）：
+   失败时才转红，其余沿用 hint 的弱色，不成功后多出一行 */
+.dshr-statHint-err {
+  overflow: hidden;
+  color: var(--rs-danger);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 忙碌态：按钮转成弱色，跟「已点过」的成功色区分开 */
+.dshr-checkinButton-busy {
+  color: var(--rs-faint);
+  background: var(--rs-layer-2);
+  border-color: var(--rs-line);
+}
+
+.dshr-estimateNote {
+  margin: 0;
+  color: var(--rs-faint);
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.dshr-estimateNote code {
+  padding: 0 3px;
+  border-radius: 3px;
+  background: var(--rs-layer-2);
+  font-family: var(--rs-mono);
+}
+
+/* 趋势折线图（纯 SVG + HTML 叠加层，不引图表库） */
+.dshr-trendWrap {
+  position: relative;
+  padding: 14px 14px 10px;
+}
+
+.dshr-trendBusy {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--rs-layer-1) 55%, transparent);
+  pointer-events: none;
+}
+
+/* 绘图区：高度跟 SVG 视口一致，叠加层用百分比定位才对得上 */
+.dshr-linePlot {
+  position: relative;
+  height: 150px;
+  cursor: crosshair;
+}
+
+/* 键盘可达（←/→ 逐格）：聚焦环跟面板其它控件一致 */
+.dshr-linePlot:focus-visible {
+  outline: 2px solid var(--rs-accent);
+  outline-offset: 2px;
+}
+
+/* 峰值：给读数一个量级参照；半透明底是怕压在折线上看不清 */
+.dshr-linePeak {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 4px;
+  border-radius: 3px;
+  color: var(--rs-faint);
+  background: color-mix(in srgb, var(--rs-layer-1) 72%, transparent);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+
+.dshr-lineSvg {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  overflow: visible;
+}
+
+.dshr-lineGrid {
+  stroke: var(--rs-line);
+  stroke-dasharray: 3 3;
+}
+
+.dshr-lineArea {
+  fill: color-mix(in srgb, var(--rs-accent) 14%, transparent);
+  stroke: none;
+}
+
+.dshr-linePath {
+  fill: none;
+  stroke: var(--rs-accent);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* 数值点：空心小圆（SVG 会被横向拉伸，所以画在 HTML 层） */
+.dshr-linePoint {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border: 1.5px solid var(--rs-accent);
+  border-radius: 50%;
+  background: var(--rs-layer-1);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.dshr-lineGuide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--rs-line-strong);
+  pointer-events: none;
+}
+
+.dshr-lineDot {
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  border: 2px solid var(--rs-layer-1);
+  border-radius: 50%;
+  background: var(--rs-accent);
+  box-shadow: 0 0 0 1px var(--rs-accent);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.dshr-lineLabels {
+  position: relative;
+  height: 14px;
+  margin-top: 5px;
+}
+
+.dshr-lineLabel {
+  position: absolute;
+  top: 0;
+  overflow: visible;
+  color: var(--rs-faint);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
+/* 选中的时段：标签跟着高亮，不用抬头对读数才知道看的是哪一段 */
+.dshr-lineLabel-on {
+  color: var(--rs-accent);
+  font-weight: 700;
+}
+
+.dshr-trendReadout {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 18px;
+  padding-top: 6px;
+  font-size: 11px;
+}
+
+.dshr-trendEmpty {
+  display: flex;
+  height: 150px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--rs-faint);
+  font-size: 12px;
+}
+
+.dshr-trendEmptyIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  color: var(--rs-accent);
+  background: color-mix(in srgb, var(--rs-accent) 10%, transparent);
+}
+
+/* Top 榜（供应商 / 模型并排，窄屏堆叠） */
+.dshr-rankPair {
+  display: grid;
+  flex: none;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+
+.dshr-rankList,
+.dshr-recentList {
+  display: flex;
+  flex-direction: column;
+  padding: 6px 14px 12px;
+}
+
+.dshr-rankRow,
+.dshr-recentRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 7px 0;
+  border-bottom: 1px solid var(--rs-line);
+  font-size: 12px;
+}
+
+.dshr-rankRow:last-child,
+.dshr-recentRow:last-child { border-bottom: none; }
+
+/* 表头：不参与 hover，且不画分隔线（视觉上属于卡片头） */
+.dshr-rankHead {
+  border-bottom: 1px solid var(--rs-line);
+  color: var(--rs-faint);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: .03em;
+  text-transform: uppercase;
+}
+
+.dshr-rankRow:not(.dshr-rankHead):hover { background: var(--rs-hover); }
+
+.dshr-rankName {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dshr-rankNum {
+  flex: none;
+  min-width: 52px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.dshr-rankFail { color: var(--rs-danger); }
+
+.dshr-tokenIn { color: var(--rs-accent); }
+.dshr-tokenOut { color: var(--rs-success); }
+
+/* 最近请求列宽（比 Top 榜宽，要放得下模型名） */
+.dshr-recentTime {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 5px;
+  width: 78px;
+  color: var(--rs-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.dshr-recentModel {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dshr-recentSupplier {
+  flex: none;
+  width: 92px;
+  overflow: hidden;
+  color: var(--rs-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dshr-recentRow-fail .dshr-recentModel { color: var(--rs-danger); }
+
+/* 状态点 */
+.dshr-dot {
+  display: inline-block;
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.dshr-dot-ok { background: var(--rs-success); }
+.dshr-dot-fail { background: var(--rs-danger); }
+
+/* ============================================================
+   dsh-router — 设置导航图标（换掉宿主的默认齿轮）
+   ============================================================ */
+
+/* DSH 0.1.x 的 settings.section 注册只认 id / order / label，图标是宿主按
+   「内置 id 白名单」选的，插件传不了 —— 外部 section 一律拿到通用齿轮。
+   settings-nav-icon.ts 给本插件那一行打上标记，这里用 currentColor mask
+   渲染路由字形：跟随宿主导航的 hover/active 配色，也保持 16px 图标节奏。
+   升级路径：等契约长出 icon 字段，删掉 settings-nav-icon.ts 和这一整块。 */
+[data-dsh-router-settings-nav] > svg:first-child {
+  display: none;
+}
+
+[data-dsh-router-settings-nav]::before {
+  content: '';
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='5'%20cy='5'%20r='2.4'/><circle%20cx='19'%20cy='5'%20r='2.4'/><circle%20cx='12'%20cy='19'%20r='2.4'/><path%20d='M7.4%205h9.2'/><path%20d='M5%207.4v6.2c0%202.6%203%203.4%204.6%203.8'/><path%20d='M19%207.4v6.2c0%202.6-3%203.4-4.6%203.8'/></svg>") center / contain no-repeat;
+  mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='5'%20cy='5'%20r='2.4'/><circle%20cx='19'%20cy='5'%20r='2.4'/><circle%20cx='12'%20cy='19'%20r='2.4'/><path%20d='M7.4%205h9.2'/><path%20d='M5%207.4v6.2c0%202.6%203%203.4%204.6%203.8'/><path%20d='M19%207.4v6.2c0%202.6-3%203.4-4.6%203.8'/></svg>") center / contain no-repeat;
+}