dsh-router-core 0.2.0 → 0.3.1

package/src/client/CombosTab.tsx

@@ -49,17 +49,25 @@ interface ComboForm {
 }
 
 export function CombosTab({ combos, aliases, onRefresh }: CombosTabProps): JSX.Element {
-  /** 模型 → 所属供应商前缀（按 groups 分组匹配）。
-   *  组合只存裸 id，同名模型可能属于多个供应商，故优先取「已启用」的那个；
-   *  谁都没有的模型显示裸名——不能兜底套第一个供应商的前缀，那样前缀是假的。 */
-  const aliasOf = (model: string): string => {
-    for (const g of groups) {
-      if (g.models.some(m => m.id === model && m.enabled)) return g.supplier.alias
+  /**
+   * 存储值 → 展示全名 alias/model。
+   * 存储格式 = `supplierId,modelId`：精准，同名模型不会串台。
+   * 兼容旧数据的裸 modelId：查不到归属就显示裸名——不能兜底套第一个供应商的
+   * 前缀，那样前缀是假的。
+   */
+  const displayName = (stored: string): string => {
+    const comma = stored.indexOf(',')
+    if (comma > 0) {
+      const sid = stored.slice(0, comma)
+      const mid = stored.slice(comma + 1)
+      const g = groups.find(x => x.supplier.id === sid)
+      const alias = g?.supplier.alias ?? aliases.find(a => a.id === sid)?.alias ?? ''
+      return alias === '' ? mid : `${alias}/${mid}`
     }
-    for (const g of groups) {
-      if (g.models.some(m => m.id === model)) return g.supplier.alias
-    }
-    return ''
+    // 旧数据裸 id：按分组找归属（优先已启用的），找不到显示裸名
+    const hit = groups.find(g => g.models.some(m => m.id === stored && m.enabled))
+      ?? groups.find(g => g.models.some(m => m.id === stored))
+    return hit === undefined ? stored : `${hit.supplier.alias}/${stored}`
   }
   const [showForm, setShowForm] = useState(false)
   const [editing, setEditing] = useState<RouterCombo | null>(null)
@@ -134,11 +142,13 @@ export function CombosTab({ combos, aliases, onRefresh }: CombosTabProps): JSX.E
     setForm(prev => ({ ...prev, ...patch }))
   }
 
-  const toggleModel = (id: string): void => {
+  /** 勾选：存 `supplierId,modelId`（精准归属，展示时才拼 alias）。 */
+  const toggleModel = (supplierId: string, id: string): void => {
+    const stored = `${supplierId},${id}`
     patchForm({
-      models: form.models.includes(id)
-        ? form.models.filter(m => m !== id)
-        : [...form.models, id],
+      models: form.models.includes(stored)
+        ? form.models.filter(m => m !== stored)
+        : [...form.models, stored],
     })
   }
 
@@ -313,7 +323,7 @@ export function CombosTab({ combos, aliases, onRefresh }: CombosTabProps): JSX.E
                         {combo.models.slice(0, 4).map((model, i) => (
                           <span key={`${model}-${i}`} className="dshr-comboChip">
                             <span className="dshr-comboChipNum">{i + 1}</span>
-                            <span className="dshr-comboChipSupplier">{aliasOf(model) ? `${aliasOf(model)}/${model}` : model}</span>
+                            <span className="dshr-comboChipSupplier">{displayName(model)}</span>
                           </span>
                         ))}
                         {combo.models.length > 4 && (
@@ -384,7 +394,7 @@ export function CombosTab({ combos, aliases, onRefresh }: CombosTabProps): JSX.E
                         >
                           <span className="dshr-comboGrip" title="拖拽排序"><Icon d={I.grip} size={14} /></span>
                           <span className="dshr-comboStepNum">{index + 1}</span>
-                          <code className="dshr-comboSelectedModel">{aliasOf(model) ? `${aliasOf(model)}/${model}` : model}</code>
+                          <code className="dshr-comboSelectedModel">{displayName(model)}</code>
                           <button type="button" className="dshr-iconBtn dshr-iconBtn-sm dshr-comboStepRemove" title="移除" onClick={() => removeModel(index)}>
                             <Icon d={I.delete} size={14} />
                           </button>
@@ -413,14 +423,14 @@ export function CombosTab({ combos, aliases, onRefresh }: CombosTabProps): JSX.E
                       ? <p className="dshr-muted dshr-comboPickEmpty">没有可添加的模型</p>
                       : groups.map(g => {
                         const items = g.models.filter(m =>
-                          !form.models.includes(m.id) &&
+                          !form.models.includes(`${g.supplier.id},${m.id}`) &&
                           (modelQuery === '' || m.id.toLowerCase().includes(modelQuery.toLowerCase())))
                         if (items.length === 0) return null
                         return (
                           <div key={g.supplier.id} className="dshr-comboPickGroup">
                             <p className="dshr-comboPickGroupTitle">{g.supplier.name} · {g.supplier.alias}</p>
                             {items.map(m => (
-                              <button key={m.id} type="button" className="dshr-comboPickItem" onClick={() => toggleModel(m.id)}>
+                              <button key={m.id} type="button" className="dshr-comboPickItem" onClick={() => toggleModel(g.supplier.id, m.id)}>
                                 <span className="dshr-comboPickName">{m.id}</span>
                               </button>
                             ))}

package/src/client/RouterView.tsx

@@ -1,17 +1,24 @@
 /**
  * 路由系统 (Routing System) panel — a simplified 9router.
  *
- * Three tabs fed by the host half (/router/api/*), mirroring 9router's
- * dashboard: 供应商 (supplier cards → detail: accounts + add-account + models),
- * 组合 (combo fallback chains), 端点与密钥 (endpoint URL + API keys + auth).
+ * Four tabs fed by the host half (/router/api/*), mirroring 9router's
+ * dashboard: 概览 (usage), 供应商 (supplier cards → detail: accounts +
+ * add-account + models), 组合 (combo fallback chains),
+ * 端点与密钥 (endpoint URL + API keys + auth).
  *
- * Masthead: 返回会话 button on the LEFT, refresh on the right.
- * No online/offline concept — suppliers render whatever state they have.
+ * **挂载在「设置」里**（`settings.section` 座位），所以布局规则跟中心栏劫持时期不同：
+ *   - 没有 masthead / 返回会话按钮 —— 设置面板自带标题栏和关闭
+ *   - **tab 条固定、只有内容区滚**：根节点限高 `height:100%`，内容区
+ *     `flex:1 + min-height:0 + overflow-y:auto` 自己滚。
+ *     根节点**必须限高** —— 不限高内容会把外壳撑开，退化成整页滚、
+ *     tab 条跟着滚上去
+ *   - 根节点外面套了一层 `display: contents`（宿主 slot renderer 给的），
+ *     不过实测 `height:100%` 仍能穿过它解析到外壳高度
+ *   - 内容宽度实测 564px（面板 612 − 左右 padding 24），卡片 grid 按这个宽度排
  */
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 import {
   ROUTER_API_BASE,
-  ROUTER_TITLE,
   type RouterCombosResponse,
   type RouterHealthResponse,
   type RouterStatusResponse,
@@ -19,8 +26,9 @@ import {
 import { SupplierDetail } from './SupplierDetail.tsx'
 import { EndpointTab } from './EndpointTab.tsx'
 import { CombosTab } from './CombosTab.tsx'
+import { StatsTab } from './StatsTab.tsx'
 
-type TabId = 'suppliers' | 'combos' | 'endpoint'
+type TabId = 'overview' | 'suppliers' | 'combos' | 'endpoint'
 
 interface Snapshot {
   health: RouterHealthResponse | null
@@ -37,12 +45,15 @@ async function getJson<T>(path: string): Promise<T> {
 }
 
 interface RouterViewProps {
-  /** 关闭面板、返回会话。 */
-  onBack: () => void
+  /**
+   * 设置页不提供「返回会话」（关闭由设置面板自己负责），所以这里是可选的：
+   * 中心栏劫持那套老挂载方式还留着时会传。
+   */
+  onBack?: () => void
 }
 
 export function RouterView({ onBack }: RouterViewProps): JSX.Element {
-  const [tab, setTab] = useState<TabId>('suppliers')
+  const [tab, setTab] = useState<TabId>('overview')
   const [detailSupplier, setDetailSupplier] = useState<{ id: string; name: string; icon?: string } | null>(null)
   const [snapshot, setSnapshot] = useState<Snapshot>({ health: null, status: null, combos: null })
   const [refreshing, setRefreshing] = useState(false)
@@ -111,32 +122,38 @@ export function RouterView({ onBack }: RouterViewProps): JSX.Element {
   }
 
   return (
-    <div className="dshr-shell">
-      <header className="dshr-masthead">
-        <button type="button" className="dshr-backButton" onClick={onBack} title="返回会话">
-          <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-            <path d="M10 3 5 8l5 5" />
-          </svg>
-          <span>返回会话</span>
+    <div className="dshr-settings">
+      {/* tab 切换：设置页已有页面标题，这里只做二级切换 */}
+      <nav className="dshr-tabs" role="tablist" aria-label="路由分区">
+        <button type="button" role="tab" aria-selected={tab === 'overview'} className={`dshr-tab${tab === 'overview' ? ' dshr-tab-on' : ''}`} onClick={() => setTab('overview')}>
+          概览
         </button>
-        <div className="dshr-brand">
-          <div className="dshr-brandTitle">{ROUTER_TITLE}</div>
-        </div>
-      </header>
-
-      <nav className="dshr-nav">
-        <button type="button" aria-current={tab === 'suppliers' ? 'page' : undefined} onClick={() => setTab('suppliers')}>
+        <button type="button" role="tab" aria-selected={tab === 'suppliers'} className={`dshr-tab${tab === 'suppliers' ? ' dshr-tab-on' : ''}`} onClick={() => setTab('suppliers')}>
           供应商 <span className="dshr-navCount">{suppliers.length}</span>
         </button>
-        <button type="button" aria-current={tab === 'combos' ? 'page' : undefined} onClick={() => setTab('combos')}>
+        <button type="button" role="tab" aria-selected={tab === 'combos'} className={`dshr-tab${tab === 'combos' ? ' dshr-tab-on' : ''}`} onClick={() => setTab('combos')}>
           组合 <span className="dshr-navCount">{combos.length}</span>
         </button>
-        <button type="button" aria-current={tab === 'endpoint' ? 'page' : undefined} onClick={() => setTab('endpoint')}>
+        <button type="button" role="tab" aria-selected={tab === 'endpoint'} className={`dshr-tab${tab === 'endpoint' ? ' dshr-tab-on' : ''}`} onClick={() => setTab('endpoint')}>
           端点与密钥
         </button>
+        {/* 返回会话只在老的中心栏挂载方式下出现（设置页有关闭按钮） */}
+        {onBack !== undefined && (
+          <button type="button" className="dshr-tabBack" onClick={onBack}>返回会话</button>
+        )}
       </nav>
 
-      <div className="dshr-content">
+      <div className="dshr-settingsBody">
+        {/* ---------------- 概览（用量看板） ---------------- */}
+        {tab === 'overview' && (
+          <StatsTab
+            active
+            refreshing={refreshing}
+            health={snapshot.health}
+            onRefresh={() => void refresh()}
+          />
+        )}
+
         {/* ---------------- 供应商 ---------------- */}
         {tab === 'suppliers' && (
           detailSupplier !== null