dsh-dock 0.11.3 → 0.11.5

package/features/mobile-relay/host.js

@@ -154,6 +154,24 @@ const MOBILE_LAYOUT_CSS = [
   '  .dsh-mobile-drawer-btn:active{transform:scale(.94)}',
   '  .dsh-mobile-drawer-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}',
   '  .dsh-mobile-scrim{position:fixed;inset:0;z-index:75;background:rgba(8,10,14,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);touch-action:none}',
+  // ---- 仿 ZCode 手机端：底部 Tab 栏 + 输入区吸附底部 ----
+  // Tab 栏 z 序 65：低于遮罩 75 / 抽屉 80 / overlayLayer 90 / 功能坞面板 200，
+  // 这些浮层打开时自然盖住 Tab 栏。功能坞面板打开时另由行为脚本整体隐藏（防露边）。
+  '  .dsh-mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:65;display:flex;align-items:stretch;justify-content:space-around;padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--dsw-alias-bg-layer-2,#1c2230) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--dsw-alias-border-l1,rgba(127,139,161,.25));touch-action:manipulation}',
+  '  .dsh-mobile-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;padding:4px 0;border:0;background:transparent;color:var(--dsw-alias-label-tertiary,#8b95ab);font-size:11px;font-weight:600;line-height:1.2;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px}',
+  '  .dsh-mobile-tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}',
+  '  .dsh-mobile-tab.on{color:var(--dsw-alias-label-primary,#e6eaf2)}',
+  '  .dsh-mobile-tab.on svg{color:#4d9fff}',
+  '  .dsh-mobile-tab:active{transform:scale(.94)}',
+  // 输入区吸附到 Tab 栏上方：宿主把欢迎内容 justify-content:center 垂直居中，
+  // 手机视口下输入卡片悬在中部、下方留出大片空白。改为 flex-end 贴底，并给
+  // 滚动体留出 Tab 栏高度的内边距，避免内容被 Tab 栏遮挡。
+  '  [class*="scrollBody"]{justify-content:flex-end!important;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}',
+  '  [class*="scrollBody"]>[class*="composerSeat"]{padding-bottom:6px}',
+  // 收起的侧栏轨道（collapsed rail）在窄屏只剩 1px 占位，但轨道里的按钮
+  // 仍会溢出贴在左边缘（功能坞/进化/设置三枚露出半边的圆钮）。隐藏整列，
+  // 这些入口已由底部 Tab 栏接管；展开抽屉（z 80）不受影响。
+  '  [class*="sidebarCol"]:has([class*="collapsed"]){visibility:hidden}',
   '}',
 ].join('\n')
 const MOBILE_LAYOUT_MARKER = 'data-dsh-mobile-layout'
@@ -180,10 +198,39 @@ const MOBILE_BEHAVIOR_JS = [
   'function collapse(){var b=document.querySelector(\'button[aria-label="收起侧边栏"],button[aria-label="Collapse sidebar"]\');if(b)b.click()}',
   'function expand(){var b=document.querySelector(\'button[aria-label="打开侧边栏"],button[aria-label="Open sidebar"]\');if(b)b.click()}',
   'function closeDetails(){var d=document.querySelector(\'[class*="detailsCol"]\');if(!d||!d.getBoundingClientRect().width)return;var c=d.querySelector(\'button[aria-label="关闭详情"]\');if(c)c.click()}',
-  'var fab=null,scrim=null;',
+  'var fab=null,scrim=null,tabbar=null;',
+  'var TAB_DEFS=[',
+  '  {id:"sessions",label:"会话",icon:\'<svg viewBox="0 0 24 24"><path d="M21 12a8 8 0 0 1-8 8H5l-2 2V12a8 8 0 0 1 8-8h2a8 8 0 0 1 8 8z"/></svg>\',act:function(){expand()}},',
+  '  {id:"dock",label:"功能坞",icon:\'<svg viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg>\',act:function(){var b=document.querySelector("button.docke2-rail,button[class*=\'docke2-btn\'][class*=\'docke2-rail\']");if(b){var col=b.closest(\'[class*="sidebarCol"]\');if(col)col.style.visibility="";b.click();if(col)setTimeout(function(){col.style.visibility=""},0)}}},',
+  '  {id:"settings",label:"设置",icon:\'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.55V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1 1.51 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.23.6.86 1 1.51 1H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1z"/></svg>\',act:function(){var bs=document.querySelectorAll("button");for(var i=0;i<bs.length;i++){if(bs[i].getAttribute("aria-label")==="设置"){bs[i].click();return}}}}',
+  '];',
+  'function syncTabs(){',
+  '  if(!tabbar)return;',
+  '  var expanded=!sidebarCollapsed();',
+  '  var settingsOpen=dialogOpen();',
+  '  var dockOpen=!!document.querySelector(".dockm-backdrop");',
+  '  var bs=tabbar.querySelectorAll(".dsh-mobile-tab");',
+  '  for(var i=0;i<bs.length;i++){',
+  '    var id=bs[i].dataset.tab;',
+  '    var on=(id==="sessions"&&expanded)||(id==="dock"&&dockOpen)||(id==="settings"&&settingsOpen);',
+  '    if(on)bs[i].classList.add("on");else bs[i].classList.remove("on");',
+  '  }',
+  '}',
   'function ensureChrome(){',
   '  if(!fab){fab=document.createElement("button");fab.type="button";fab.className="dsh-mobile-drawer-btn";fab.setAttribute("aria-label","打开会话列表");fab.innerHTML=\'<svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg>\';fab.addEventListener("click",function(){expand()});document.body.appendChild(fab)}',
   '  if(!scrim){scrim=document.createElement("div");scrim.className="dsh-mobile-scrim";document.body.appendChild(scrim)}',
+  '  if(!tabbar){',
+  '    tabbar=document.createElement("nav");tabbar.className="dsh-mobile-tabbar";tabbar.setAttribute("aria-label","底部导航");',
+  '    for(var i=0;i<TAB_DEFS.length;i++){',
+  '      (function(def){',
+  '        var b=document.createElement("button");b.type="button";b.className="dsh-mobile-tab";b.dataset.tab=def.id;',
+  '        b.innerHTML=def.icon+"<span>"+def.label+"</span>";',
+  '        b.addEventListener("click",function(){def.act()});',
+  '        tabbar.appendChild(b);',
+  '      })(TAB_DEFS[i]);',
+  '    }',
+  '    document.body.appendChild(tabbar);',
+  '  }',
   '}',
   // 把手定位：贴着趣味游戏浮标（.dgfab，可拖拽）正上方；浮标太靠上时改放它下面
   // （避开顶栏标题），被拖走/隐藏/不存在时兜底左侧中部（38% 视高）。
@@ -206,10 +253,15 @@ const MOBILE_BEHAVIOR_JS = [
   '  if(!fab||!scrim)return;',
   '  var on=narrow()&&!!frameEl()&&!dialogOpen();',
   '  var col=sidebarCollapsed();',
-  '  var showFab=on&&col;',
+  '  var dockOpen=!!document.querySelector(".dockm-backdrop");',
+  '  var showFab=on&&col&&!dockOpen;',
   '  fab.style.display=showFab?"":"none";',
   '  if(showFab)place();',
   '  scrim.style.display=on&&!col?"":"none";',
+  // Tab 栏：窄屏且页面骨架就绪后常驻；功能坞面板打开时整体隐藏（面板全屏
+  // 模态，Tab 栏 z 序低于它仍可能从边缘露出）；宿主设置弹窗 z 序更高，自然盖住。
+  '  if(tabbar)tabbar.style.display=narrow()&&!!frameEl()&&!dockOpen?"":"none";',
+  '  syncTabs();',
   '}',
   'function boot(){',
   '  ensureChrome();syncChrome();',
@@ -224,7 +276,7 @@ const MOBILE_BEHAVIOR_JS = [
   '  if(!narrow())return;',
   '  var t=e.target;',
   '  if(!t||!t.closest)return;',
-  '  if(t.closest(".dsh-mobile-drawer-btn"))return;',
+  '  if(t.closest(".dsh-mobile-drawer-btn")||t.closest(".dsh-mobile-tabbar"))return;',
   '  var expanded=!!document.querySelector(\'button[aria-label="收起侧边栏"],button[aria-label="Collapse sidebar"]\');',
   '  var col=document.querySelector(\'[class*="sidebarCol"]\');',
   '  var inSidebar=col&&col.contains(t);',

package/features/mobile-relay/view.jsx

@@ -4,6 +4,7 @@
 // 访问地址二维码；远程设备上经 window.__DSH_REMOTE__ 显示退出登录。
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import QRCode from 'qrcode'
+import { openPanel, setPanelOpen, subscribePanel, panelNav } from '../../src/shared.js'
 
 function rpc(method, payload) {
   return fetch('/dsh-dock/mobile-relay/' + method, {
@@ -171,10 +172,12 @@ export function MobileRelayView() {
 export function MobileRelayOverlay() {
   useEffect(() => {
     if (typeof window === 'undefined' || typeof document === 'undefined') return undefined
-    if (window.__dshDockMobileDrawer) return undefined
+    // 宿主版（<head> 注入，重启后接管）就位时，抽屉把手/遮罩/收起逻辑由宿主负责，
+    // 本组件只补宿主旧版没有的底部 Tab 栏；宿主未就位（旧版无抽屉 DOM）时全套自建。
+    const hostPresent = !!(window.__dshDockMobileDrawer && document.querySelector('.dsh-mobile-drawer-btn'))
     const mq = window.matchMedia ? window.matchMedia('(max-width:700px)') : null
     if (!mq) return undefined
-    window.__dshDockMobileDrawer = 'client'
+    if (!hostPresent) window.__dshDockMobileDrawer = 'client'
 
     const narrow = () => mq.matches
     const frameEl = () => document.querySelector('[class$="frame"]')
@@ -192,21 +195,72 @@ export function MobileRelayOverlay() {
     // 抽屉按钮：窄屏 + 侧栏收起 + 无设置弹窗时才显示（见 sync）。
     // 视觉是贴左边缘的「抽屉把手」（与趣味游戏浮标 dgfab 同款边缘吸附语言），
     // 位置动态放在趣味游戏浮标正上方（place()），游戏浮标不在时兜底左侧中部。
-    const fab = document.createElement('button')
-    fab.type = 'button'
-    fab.className = 'dsh-mobile-drawer-btn'
-    fab.setAttribute('aria-label', '打开会话列表')
-    fab.innerHTML = '<svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg>'
-    fab.addEventListener('click', expand)
-    const scrim = document.createElement('div')
-    scrim.className = 'dsh-mobile-scrim'
-    document.body.appendChild(fab)
-    document.body.appendChild(scrim)
+    // 宿主就位时把手/遮罩已由宿主创建，这里置 null 走纯 Tab 栏模式。
+    let fab = null
+    let scrim = null
+    if (!hostPresent) {
+      fab = document.createElement('button')
+      fab.type = 'button'
+      fab.className = 'dsh-mobile-drawer-btn'
+      fab.setAttribute('aria-label', '打开会话列表')
+      fab.innerHTML = '<svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg>'
+      fab.addEventListener('click', expand)
+      scrim = document.createElement('div')
+      scrim.className = 'dsh-mobile-scrim'
+      document.body.appendChild(fab)
+      document.body.appendChild(scrim)
+    }
+
+    // ---- 仿 ZCode 手机端底部 Tab 栏：会话 / 功能坞 / 设置 ----
+    // 挂 body（与抽屉把手同理，避开 overlayLayer 堆叠上下文），z 序 65：
+    // 低于遮罩 75 / 侧栏抽屉 80 / 功能坞面板 200，这些打开时自然盖住 Tab 栏。
+    const tabbar = document.createElement('nav')
+    tabbar.className = 'dsh-mobile-tabbar'
+    tabbar.setAttribute('aria-label', '底部导航')
+    const tabDefs = [
+      {
+        id: 'sessions', label: '会话',
+        icon: '<svg viewBox="0 0 24 24"><path d="M21 12a8 8 0 0 1-8 8H5l-2 2V12a8 8 0 0 1 8-8h2a8 8 0 0 1 8 8z"/></svg>',
+        act: () => expand(),
+      },
+      {
+        id: 'dock', label: '功能坞',
+        icon: '<svg viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg>',
+        act: () => { if (panelNav.open) setPanelOpen(false); else openPanel('home') },
+      },
+      {
+        id: 'settings', label: '设置',
+        icon: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.55V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1 1.51 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.23.6.86 1 1.51 1H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1z"/></svg>',
+        act: () => { const b = [...document.querySelectorAll('button')].find((x) => (x.getAttribute('aria-label') || '') === '设置' || (x.textContent || '').trim() === '设置'); if (b) b.click() },
+      },
+    ]
+    const tabButtons = tabDefs.map((def) => {
+      const b = document.createElement('button')
+      b.type = 'button'
+      b.className = 'dsh-mobile-tab'
+      b.dataset.tab = def.id
+      b.innerHTML = def.icon + '<span>' + def.label + '</span>'
+      b.addEventListener('click', () => def.act())
+      tabbar.appendChild(b)
+      return b
+    })
+    document.body.appendChild(tabbar)
+    const syncTabs = () => {
+      const expanded = !sidebarCollapsed()
+      const settingsOpen = dialogOpen()
+      for (const b of tabButtons) {
+        const id = b.dataset.tab
+        const on = (id === 'sessions' && expanded) || (id === 'dock' && panelNav.open) || (id === 'settings' && settingsOpen)
+        b.classList.toggle('on', on)
+      }
+    }
+    const unsubPanel = subscribePanel(syncTabs)
 
     // 把手定位：贴着趣味游戏浮标（.dgfab，可拖拽、位置内联在 style 上）正上方；
     // 浮标被拖到顶/隐藏/不存在时兜底左侧中部（38% 视高）。sync 每 1.5s 复测，
     // 拖拽浮标后把手最迟一个周期跟上；resize 立即复测。
     const place = () => {
+      if (!fab) return
       const vh = window.innerHeight
       let top = null
       const g = document.querySelector('.dgfab')
@@ -225,10 +279,15 @@ export function MobileRelayOverlay() {
     const sync = () => {
       const on = narrow() && !!frameEl() && !dialogOpen()
       const collapsed = sidebarCollapsed()
-      const showFab = on && collapsed
-      fab.style.display = showFab ? '' : 'none'
-      if (showFab) place()
-      scrim.style.display = on && !collapsed ? '' : 'none'
+      if (fab) {
+        const showFab = on && collapsed && !panelNav.open
+        fab.style.display = showFab ? '' : 'none'
+        if (showFab) place()
+      }
+      if (scrim) scrim.style.display = on && !collapsed ? '' : 'none'
+      // Tab 栏：窄屏且页面骨架就绪后常驻；功能坞面板/宿主设置弹窗打开时隐藏（它们的遮罩更高，避免露边）
+      tabbar.style.display = narrow() && !!frameEl() && !panelNav.open ? '' : 'none'
+      syncTabs()
     }
     sync()
     // MutationObserver 跟属性翻转即时同步；1.5s 轮询覆盖路由重渲等一切边角
@@ -240,13 +299,14 @@ export function MobileRelayOverlay() {
     else if (mq.addListener) mq.addListener(onMq)
     window.addEventListener('resize', place)
 
-    // 捕获阶段统一处理：抽屉按钮自身排除（否则展开动作会被"点外部收起"当场撤销）；
+    // 捕获阶段统一处理（仅自建模式；宿主就位时宿主已有同款全局捕获）：
+    // 抽屉按钮自身排除（否则展开动作会被"点外部收起"当场撤销）；
     // 遮罩不挂自己的 click——它的点击也走这里 collapse()，单一路径防止同一事件两次 toggle。
     const onClick = (e) => {
       if (!narrow()) return
       const t = e.target
       if (!t || !t.closest) return
-      if (t.closest('.dsh-mobile-drawer-btn')) return
+      if (t.closest('.dsh-mobile-drawer-btn') || t.closest('.dsh-mobile-tabbar')) return
       const expanded = !!document.querySelector('button[aria-label="收起侧边栏"],button[aria-label="Collapse sidebar"]')
       const col = document.querySelector('[class*="sidebarCol"]')
       const inSidebar = col && col.contains(t)
@@ -261,17 +321,19 @@ export function MobileRelayOverlay() {
       if (t.closest('[role="dialog"],[class*="dockm"],[class*="dgfab"],[class*="dgwin"],[class*="dgame"],[class*="detailsCol"]')) return
       collapse()
     }
-    document.addEventListener('click', onClick, true)
+    if (!hostPresent) document.addEventListener('click', onClick, true)
 
     return () => {
-      document.removeEventListener('click', onClick, true)
+      if (!hostPresent) document.removeEventListener('click', onClick, true)
       if (observer) observer.disconnect()
       clearInterval(timer)
+      unsubPanel()
       if (mq.removeEventListener) mq.removeEventListener('change', onMq)
       else if (mq.removeListener) mq.removeListener(onMq)
       window.removeEventListener('resize', place)
-      fab.remove()
-      scrim.remove()
+      if (fab) fab.remove()
+      if (scrim) scrim.remove()
+      tabbar.remove()
       if (window.__dshDockMobileDrawer === 'client') delete window.__dshDockMobileDrawer
     }
   }, [])
@@ -295,6 +357,24 @@ export const feature = {
 .dmr{--dmr-accent:var(--dk-accent,#2f6fed);--dmr-accent-soft:color-mix(in srgb,var(--dmr-accent) 13%,transparent);display:flex;flex-direction:column;gap:16px;max-width:720px;color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5}.dmr h3,.dmr h4,.dmr p{margin:0}.dmr h3{font-size:17px;line-height:1.25;letter-spacing:-.01em}.dmr h4{font-size:13px}.dmr-hero,.dmr-status-head{display:flex;align-items:flex-start;gap:12px}.dmr-hero>div,.dmr-status-head>div{min-width:0;display:flex;flex-direction:column;gap:4px}.dmr-hero p,.dmr-status-head p,.dmr-field small,.dmr-share small,.dmr-overview-card small,.dmr-task small,.dmr-note p{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.55}.dmr-hero-icon{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:14px;background:var(--dmr-accent-soft);color:var(--dmr-accent);border:1px solid color-mix(in srgb,var(--dmr-accent) 35%,var(--dsw-alias-border-l1))}.dmr-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.dmr-steps li{display:flex;gap:9px;padding:11px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:12px}.dmr-steps li>span{width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;font-size:11px;font-weight:700;color:var(--dmr-accent);background:var(--dmr-accent-soft)}.dmr-steps div{display:flex;flex-direction:column;gap:3px;min-width:0}.dmr-steps strong{font-size:12px}.dmr-steps small{font-size:11px;color:var(--dsw-alias-label-secondary);line-height:1.45}.dmr-field{display:flex;flex-direction:column;gap:6px;font-weight:600}.dmr-field input,.dmr-field select,.dmr-note textarea{box-sizing:border-box;width:100%;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);border-radius:10px;padding:10px 12px;min-height:44px;font:inherit;outline:none;transition:border-color .18s ease,box-shadow .18s ease}.dmr-field input:focus,.dmr-field select:focus,.dmr-note textarea:focus{border-color:var(--dmr-accent);box-shadow:0 0 0 3px var(--dmr-accent-soft)}.dmr-field small{font-weight:400}.dmr-network-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(150px,.6fr);gap:12px}.dmr-security{padding:12px 13px;border:1px solid color-mix(in srgb,var(--dk-warn) 48%,var(--dsw-alias-border-l1));border-radius:12px;background:color-mix(in srgb,var(--dk-warn) 9%,transparent)}.dmr-security strong{display:block;margin-bottom:4px;color:var(--dk-warn);font-size:12px}.dmr-security p{font-size:12px;color:var(--dsw-alias-label-secondary);line-height:1.55}.dmr-primary,.dmr-secondary,.dmr-text-button,.dmr-icon-button{font:inherit;touch-action:manipulation;cursor:pointer;transition:transform .15s ease,background .18s ease,border-color .18s ease,opacity .18s ease}.dmr-primary,.dmr-secondary{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:9px 13px;font-weight:600}.dmr-primary{align-self:flex-start;border:1px solid var(--dmr-accent);background:var(--dmr-accent);color:#fff}.dmr-primary:hover{filter:brightness(1.05)}.dmr-secondary{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary)}.dmr-secondary:hover{border-color:var(--dmr-accent);background:var(--dmr-accent-soft)}.dmr-primary:active,.dmr-secondary:active,.dmr-icon-button:active{transform:scale(.98)}.dmr-primary:disabled,.dmr-secondary:disabled,.dmr-text-button:disabled,.dmr-icon-button:disabled{cursor:not-allowed;opacity:.5}.dmr-message{display:flex;align-items:flex-start;gap:7px;padding:10px 12px;border-radius:10px;font-size:12px}.dmr-message.success{color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 10%,transparent)}.dmr-message.error{color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent)}.dmr-status-head{justify-content:space-between}.dmr-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--dmr-accent)}.dmr-eyebrow i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--dmr-accent-soft)}.dmr-icon-button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:transparent;color:var(--dsw-alias-label-secondary)}.dmr-icon-button:hover{color:var(--dsw-alias-state-error-primary);border-color:currentColor}.dmr-share{display:flex;flex-direction:column;gap:9px;padding:13px;border:1px solid color-mix(in srgb,var(--dmr-accent) 32%,var(--dsw-alias-border-l1));border-radius:13px;background:var(--dmr-accent-soft)}.dmr-share-layout{display:grid;grid-template-columns:196px minmax(0,1fr);gap:16px;align-items:center}.dmr-qr-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px;border-radius:12px;background:#fff;color:#111827;text-align:center}.dmr-qr-card img{display:block;width:176px;height:176px;max-width:100%;object-fit:contain}.dmr-qr-card strong{font-size:12px}.dmr-qr-card small{color:#4b5563;font-size:10px}.dmr-qr-loading{display:grid;place-items:center;width:176px;height:176px;color:#64748b;font-size:12px}.dmr-share-detail{min-width:0;display:flex;flex-direction:column;gap:10px}.dmr-share-detail>div:first-child{display:flex;flex-direction:column;gap:4px}.dmr-link{padding:10px 11px;border-radius:8px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;color:var(--dsw-alias-label-secondary)}.dmr-share-actions{display:flex;gap:8px;flex-wrap:wrap}.dmr-share-actions .dmr-primary{align-self:auto}.dmr-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dmr-overview-card{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--dsw-alias-border-l1);border-radius:12px;background:var(--dsw-alias-bg-layer-1)}.dmr-overview-card>span{font-size:11px;color:var(--dsw-alias-label-tertiary)}.dmr-overview-card strong{font-size:16px;letter-spacing:-.01em}.dmr-section{display:flex;flex-direction:column;gap:9px}.dmr-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dmr-section-head small{font-size:11px;color:var(--dsw-alias-label-tertiary)}.dmr-text-button{border:0;background:transparent;color:var(--dmr-accent);padding:8px;min-height:36px;font-weight:600}.dmr-task-list{display:flex;flex-direction:column;gap:8px}.dmr-task{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1)}.dmr-task>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}.dmr-task strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dmr-phase{flex:none;border-radius:999px;padding:3px 8px;font-size:11px;background:var(--dmr-accent-soft);color:var(--dmr-accent)}.dmr-phase.write{color:var(--dsw-alias-state-success-primary)}.dmr-phase.code{color:var(--dk-warn)}.dmr-phase.search{color:#0d9488}.dmr-empty{padding:18px 12px;text-align:center;border:1px dashed var(--dsw-alias-border-l2);border-radius:10px;color:var(--dsw-alias-label-secondary);font-size:12px}.dmr-note{display:flex;flex-direction:column;gap:9px;padding-top:2px}.dmr-note blockquote{margin:0;padding:10px 12px;border-left:3px solid var(--dmr-accent);border-radius:0 9px 9px 0;background:var(--dmr-accent-soft);white-space:pre-wrap;font-size:12px}.dmr-note textarea{min-height:88px;resize:vertical;line-height:1.5}.dmr-note .dmr-secondary{align-self:flex-start}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width:680px){.dmr{gap:14px;font-size:14px}.dmr h3{font-size:18px}.dmr-steps{grid-template-columns:1fr;gap:8px}.dmr-steps li{padding:10px}.dmr-steps small,.dmr-hero p,.dmr-status-head p,.dmr-field small,.dmr-share small,.dmr-overview-card small,.dmr-task small,.dmr-note p{font-size:12px}.dmr-network-grid{grid-template-columns:1fr;gap:10px}.dmr-field input,.dmr-field select{font-size:16px}.dmr-primary,.dmr-secondary{width:100%;font-size:14px}.dmr-share-layout{grid-template-columns:1fr;gap:12px}.dmr-qr-card{width:min(240px,100%);margin:0 auto}.dmr-qr-card img,.dmr-qr-loading{width:210px;height:210px}.dmr-share-actions{flex-direction:column}.dmr-share-actions .dmr-primary{width:100%}.dmr-overview{gap:8px}.dmr-overview-card{padding:11px}.dmr-status-head{gap:8px}.dmr-link{font-size:11px}.dmr-note textarea{font-size:16px;min-height:104px}.dmr-note .dmr-secondary{align-self:stretch}.dmr-compact .dmr-hero-icon{width:40px;height:40px;border-radius:13px}}@media (prefers-reduced-motion:reduce){.dmr-primary,.dmr-secondary,.dmr-text-button,.dmr-icon-button,.dmr-field input,.dmr-field select,.dmr-note textarea{transition:none}}.dmr-lan{flex:none;margin-top:6px;padding-top:16px;border-top:1px solid var(--dsw-alias-border-l1)}.dmr-lan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dmr-lan-title{min-width:0;display:flex;flex-direction:column;gap:4px}.dmr-lan-title p{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.55}.dmr-lan-badge{flex:none;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary)}.dmr-lan-badge.on{border-color:color-mix(in srgb,var(--dmr-accent) 45%,transparent);background:var(--dmr-accent-soft);color:var(--dmr-accent)}.dmr-lan-active,.dmr-lan-idle{display:flex;flex-direction:column;gap:12px}.dmr-lan-active .dmr-share-detail small strong{color:var(--dsw-alias-state-error-primary)}.dmr-danger{border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 45%,var(--dsw-alias-border-l2));color:var(--dsw-alias-state-error-primary)}.dmr-danger:hover{border-color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent)}
 /* 抽屉把手：贴左边缘（同趣味游戏浮标的边缘吸附语言），top 由 place() 动态设定；
  * z 序 70 < 遮罩 75 < 侧栏 80 < overlayLayer 90，面板/弹窗打开时自然被盖。 */
-@media (max-width:700px){.dsh-mobile-drawer-btn{position:fixed;left:0;top:38vh;z-index:70;box-sizing:border-box;width:30px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--dsw-alias-border-l1,rgba(127,139,161,.35));border-left:none;border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--dsw-alias-bg-layer-2,#1c2230) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--dsw-alias-label-primary,#e6eaf2);box-shadow:4px 0 18px rgba(0,0,0,.28);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.dsh-mobile-drawer-btn:active{transform:scale(.94)}.dsh-mobile-drawer-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.dsh-mobile-scrim{position:fixed;inset:0;z-index:75;background:rgba(8,10,14,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);touch-action:none}}`,
+@media (max-width:700px){.dsh-mobile-drawer-btn{position:fixed;left:0;top:38vh;z-index:70;box-sizing:border-box;width:30px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--dsw-alias-border-l1,rgba(127,139,161,.35));border-left:none;border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--dsw-alias-bg-layer-2,#1c2230) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--dsw-alias-label-primary,#e6eaf2);box-shadow:4px 0 18px rgba(0,0,0,.28);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.dsh-mobile-drawer-btn:active{transform:scale(.94)}.dsh-mobile-drawer-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.dsh-mobile-scrim{position:fixed;inset:0;z-index:75;background:rgba(8,10,14,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);touch-action:none}
+/* ---- 仿 ZCode 手机端：底部 Tab 栏 + 输入区吸附底部 ---- */
+.dsh-mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:65;display:flex;align-items:stretch;justify-content:space-around;padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--dsw-alias-bg-layer-2,#1c2230) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--dsw-alias-border-l1,rgba(127,139,161,.25));touch-action:manipulation}
+.dsh-mobile-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;padding:4px 0;border:0;background:transparent;color:var(--dsw-alias-label-tertiary,#8b95ab);font:600 11px/1.2 inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px}
+.dsh-mobile-tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
+.dsh-mobile-tab.on{color:var(--dsw-alias-label-primary,#e6eaf2)}
+.dsh-mobile-tab.on svg{color:var(--dk-accent,#4d9fff)}
+.dsh-mobile-tab:active{transform:scale(.94)}
+/* 输入区吸附到 Tab 栏上方：宿主把欢迎内容 justify-content:center 垂直居中，
+ * 手机视口下输入卡片悬在中部、下方留出大片空白。改为 flex-end 贴底，并给
+ * 滚动体留出 Tab 栏高度的内边距，避免内容被 Tab 栏遮挡。 */
+[class*="scrollBody"]{justify-content:flex-end !important;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important}
+[class*="scrollBody"]>[class*="composerSeat"]{padding-bottom:6px}
+/* 收起的侧栏轨道（collapsed rail）在窄屏只剩 1px 占位，但轨道里的按钮
+ * 仍会溢出贴在左边缘（功能坞/进化/设置三枚露出半边的圆钮）。隐藏整列，
+ * 这些入口已由底部 Tab 栏接管；展开抽屉（z 80）不受影响。 */
+[class*="sidebarCol"]:has([class*="collapsed"]){visibility:hidden}
+/* 抽屉把手从屏幕中部挪到 Tab 栏上方一点，免得孤零零悬在半空 */
+.dsh-mobile-drawer-btn{top:auto !important;bottom:calc(96px + env(safe-area-inset-bottom,0px))}}`,
   View: MobileRelayView, HomeStat: MobileRelayHomeStat, Overlay: MobileRelayOverlay,
 }

package/features/tokenlog/view.jsx

@@ -64,6 +64,19 @@ function fmtCostCnyExact(usd, rate) {
 	const v = (Number(usd) || 0) * (Number(rate) > 0 ? Number(rate) : 7.2);
 	return "¥" + v.toFixed(4);
 }
+function fmtDurCompact(ms) {
+	if (ms === null || ms === undefined || isNaN(ms)) return "—";
+	if (ms < 1000) return Math.round(ms) + "ms";
+	if (ms < 60000) return (ms / 1000).toFixed(1) + "s";
+	if (ms < 3600000) return Math.round(ms / 60000) + "m";
+	return (ms / 3600000).toFixed(1) + "h";
+}
+function startOfToday() {
+	const d = new Date();
+	d.setHours(0, 0, 0, 0);
+	return d.getTime();
+}
+function hourOf(ts) { return new Date(ts).getHours(); }
 
 // ---------- CSV 导出 ----------
 // 表头即「调用明细」表的中文列名, 列序/取值格式与页面完全一致(日期时间、千分位、命中%、¥xx.xxxx、
@@ -152,6 +165,201 @@ function statusInfo(r) {
 	return { code: 0, label: "…", cls: "pend", title: "进行中" };
 }
 
+// ---------- 图表统计（纯 CSS/SVG，无第三方图表库：视图由外壳直接渲染，依赖越少越稳） ----------
+// 调色板按索引取色，循环使用；按值降序分配，颜色与排名绑定而不是与名字绑定。
+const CHART_COLORS = ["#60a5fa", "#fbbf24", "#4ade80", "#f472b6", "#a78bfa", "#fb923c", "#2dd4bf", "#e879f9", "#94a3b8", "#f87171"];
+function chartColor(i) { return CHART_COLORS[i % CHART_COLORS.length]; }
+const CHART_METRICS = [
+	["totalTokens", "总 Token", (v) => fmtCompact(v)],
+	["calls", "调用次数", (v) => fmtNum(v)],
+	["cost", "金额", (v, rate) => fmtCostCny(v, rate)],
+	["outputTokens", "输出 Token", (v) => fmtCompact(v)],
+];
+const CHART_DIMS = [
+	["model", "模型"],
+	["provider", "提供商"],
+	["status", "状态"],
+	["effort", "推理强度"],
+];
+function emptyAgg() {
+	return { calls: 0, totalTokens: 0, outputTokens: 0, inputTokens: 0, cacheReadTokens: 0, reasoningTokens: 0, cost: 0, llmMs: 0, timed: 0 };
+}
+function addToAgg(a, r) {
+	a.calls += 1;
+	a.totalTokens += Number(r.totalTokens) || 0;
+	a.outputTokens += Number(r.outputTokens) || 0;
+	a.inputTokens += Number(r.inputTokens) || 0;
+	a.cacheReadTokens += Number(r.cacheReadTokens) || 0;
+	a.reasoningTokens += Number(r.reasoningTokens) || 0;
+	a.cost += Number(r.cost) || 0;
+	if (typeof r.llmMs === "number") { a.llmMs += r.llmMs; a.timed += 1; }
+}
+/** records → [{key, ...agg}]，按 metric 降序。 */
+function groupByKey(records, keyFn, metric) {
+	const map = new Map();
+	for (const r of records) {
+		const k = keyFn(r);
+		let a = map.get(k);
+		if (!a) { a = emptyAgg(); a.key = k; map.set(k, a); }
+		addToAgg(a, r);
+	}
+	return [...map.values()].sort((a, b) => (b[metric] || 0) - (a[metric] || 0));
+}
+
+/** 环形占比图：SVG conic 扇区 + 中央合计 + 图例（最多 8 项，其余并入「其他」）。 */
+function DonutChart({ items, metric, metricFmt, rate, centerLabel, emptyText }) {
+	const total = items.reduce((s, it) => s + (Number(it[metric]) || 0), 0);
+	if (!items.length || total <= 0) return <div className="dtok-chart-empty">{emptyText || "暂无数据"}</div>;
+	const shown = items.slice(0, 8);
+	const restSum = items.slice(8).reduce((s, it) => s + (Number(it[metric]) || 0), 0);
+	if (restSum > 0) {
+		const restAgg = Object.assign(emptyAgg(), { key: "其他(" + (items.length - 8) + "项)" });
+		restAgg[metric] = restSum;
+		shown.push(restAgg);
+	}
+	const R = 15.9155; // 周长 100 的半径
+	let acc = 0;
+	const segs = shown.map((it, i) => {
+		const v = Number(it[metric]) || 0;
+		const frac = v / total;
+		const seg = (
+			<circle key={it.key} cx="21" cy="21" r={R} fill="none"
+				stroke={chartColor(i)} strokeWidth={frac > 0.02 ? 7 : 5}
+				strokeDasharray={(frac * 100) + " " + (100 - frac * 100)}
+				strokeDashoffset={String(25 - acc * 100)}>
+				<title>{it.key + "：" + metricFmt(v, rate) + "（" + (frac * 100).toFixed(1) + "%）"}</title>
+			</circle>
+		);
+		acc += frac;
+		return seg;
+	});
+	return (
+		<div className="dtok-donut-wrap">
+			<svg className="dtok-donut" viewBox="0 0 42 42" role="img">
+				<circle cx="21" cy="21" r={R} fill="none" stroke="var(--dsw-alias-border-l1)" strokeWidth="7" />
+				{segs}
+				<text x="21" y="19.5" textAnchor="middle" className="dtok-donut-v">{metricFmt(total, rate)}</text>
+				<text x="21" y="26" textAnchor="middle" className="dtok-donut-l">{centerLabel}</text>
+			</svg>
+			<div className="dtok-legend">
+				{shown.map((it, i) => {
+					const v = Number(it[metric]) || 0;
+					return (
+						<div className="dtok-legend-row" key={it.key} title={it.key}>
+							<span className="dtok-dot" style={{ background: chartColor(i) }} />
+							<span className="dtok-legend-k">{it.key}</span>
+							<span className="dtok-legend-v">{metricFmt(v, rate)} · {(v / total * 100).toFixed(1)}%</span>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+/** 横向条形图：行 = 分组（默认模型），条长 = 指标值（默认耗时）。 */
+function HBarChart({ items, metric, metricFmt, rate, maxRows, emptyText }) {
+	if (!items.length) return <div className="dtok-chart-empty">{emptyText || "暂无数据"}</div>;
+	const shown = items.slice(0, maxRows || 12);
+	const max = Math.max(...shown.map((it) => Number(it[metric]) || 0), 1e-9);
+	return (
+		<div className="dtok-hbars">
+			{shown.map((it, i) => {
+				const v = Number(it[metric]) || 0;
+				const pct = Math.max(1.5, (v / max) * 100);
+				return (
+					<div className="dtok-hbar-row" key={it.key} title={it.key + "：" + metricFmt(v, rate)}>
+						<span className="dtok-hbar-k">{it.key}</span>
+						<span className="dtok-hbar-track">
+							<span className="dtok-hbar-fill" style={{ width: pct + "%", background: chartColor(i) }} />
+						</span>
+						<span className="dtok-hbar-v">{metricFmt(v, rate)}</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+/** 24 小时调用分布柱状图：柱高 = 指标值，hover 显示具体数值。 */
+function HourChart({ hours, metric, metricFmt, rate, emptyText }) {
+	const total = hours.reduce((s, h) => s + (Number(h[metric]) || 0), 0);
+	if (total <= 0) return <div className="dtok-chart-empty">{emptyText || "暂无数据"}</div>;
+	const max = Math.max(...hours.map((h) => Number(h[metric]) || 0), 1e-9);
+	return (
+		<div className="dtok-hours" role="img">
+			{hours.map((h) => {
+				const v = Number(h[metric]) || 0;
+				const pct = v > 0 ? Math.max(2, (v / max) * 100) : 0;
+				return (
+					<span key={h.hour} className="dtok-hour-col" title={h.hour + " 时：" + metricFmt(v, rate)}>
+						{pct > 0 ? <span className="dtok-hour-bar" style={{ height: pct + "%" }} /> : null}
+					</span>
+				);
+			})}
+		</div>
+	);
+}
+
+/** 图表统计区：所有图都基于「当前筛选结果 records」客户端聚合，筛选一变图表即时联动。
+ *  scope = "range"（整个时间范围）| "today"（records 里属于今天的部分）。 */
+function ChartsPanel({ records, rate }) {
+	const [metric, setMetric] = useState("totalTokens");
+	const [dim, setDimLocal] = useState("model");
+	const metricDef = CHART_METRICS.find((m) => m[0] === metric) || CHART_METRICS[0];
+	const metricFmt = metricDef[2];
+	const todayRecs = useMemo(() => {
+		const t0 = startOfToday();
+		return records.filter((r) => Number(r.time) >= t0);
+	}, [records]);
+	const todayByModel = useMemo(() => groupByKey(todayRecs, (r) => r.model || "(未知)", metric), [todayRecs, metric]);
+	const byDim = useMemo(() => groupByKey(records, (r) => r[dim] || "(空)", metric), [records, dim, metric]);
+	const modelTime = useMemo(() => groupByKey(records, (r) => r.model || "(未知)", "llmMs"), [records]);
+	const timedCalls = useMemo(() => records.reduce((s, r) => s + (typeof r.llmMs === "number" ? 1 : 0), 0), [records]);
+	const hours = useMemo(() => {
+		const arr = [];
+		for (let h = 0; h < 24; h++) { const a = emptyAgg(); a.hour = h; arr.push(a); }
+		for (const r of records) addToAgg(arr[hourOf(r.time)], r);
+		return arr;
+	}, [records]);
+	return (
+		<div className="dtok-charts">
+			<div className="dtok-chart-toolbar">
+				<span className="dtok-chart-toolbar-label">指标</span>
+				{CHART_METRICS.map(([id, label]) => (
+					<button key={id} className={"dtok-btn tiny" + (metric === id ? " primary" : "")} onClick={() => setMetric(id)}>{label}</button>
+				))}
+				<span className="dtok-chart-toolbar-note">图表跟随上方筛选条件（时间 / 会话 / 提供商 / 模型 / 状态 / 强度）实时联动</span>
+			</div>
+			<div className="dtok-chart-grid">
+				<div className="dtok-chart-card">
+					<div className="dtok-chart-title">今日模型用量占比<span className="dtok-chart-sub">{metricDef[1]} · {todayRecs.length} 次调用</span></div>
+					<DonutChart items={todayByModel} metric={metric} metricFmt={metricFmt} rate={rate} centerLabel={"今日" + metricDef[1]} emptyText="今日暂无调用" />
+				</div>
+				<div className="dtok-chart-card">
+					<div className="dtok-chart-title">24 小时调用分布<span className="dtok-chart-sub">按小时聚合 · {metricDef[1]}</span></div>
+					<HourChart hours={hours} metric={metric} metricFmt={metricFmt} rate={rate} />
+				</div>
+				<div className="dtok-chart-card">
+					<div className="dtok-chart-title">模型耗时排行<span className="dtok-chart-sub">累计 LLM 耗时 · 已计时 {timedCalls} 次</span></div>
+					<HBarChart items={modelTime} metric="llmMs" metricFmt={(v) => fmtDurCompact(v)} rate={rate} emptyText="暂无计时数据" />
+				</div>
+				<div className="dtok-chart-card">
+					<div className="dtok-chart-title">
+						分布统计
+						<span className="dtok-chart-sub">
+							{CHART_DIMS.map(([id, label]) => (
+								<button key={id} className={"dtok-btn tiny" + (dim === id ? " primary" : "")} style={{ marginLeft: 4 }} onClick={() => setDimLocal(id)}>{label}</button>
+							))}
+						</span>
+					</div>
+					<HBarChart items={byDim} metric={metric} metricFmt={metricFmt} rate={rate} />
+				</div>
+			</div>
+		</div>
+	);
+}
+
 // ---------- 样式（dtok- 前缀，dock 面板内自适应：宽度铺满、表格横向滚动） ----------
 const css = `
 .dtok-root{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;}
@@ -283,6 +491,35 @@ const css = `
 .dtok-src{font-size:11px;color:var(--dsw-alias-label-tertiary,#94a3b8);}
 .dtok-src.custom{color:var(--dsw-alias-state-success-primary,#4ade80);}
 .dtok-src.fallback{color:var(--dk-warn);}
+/* ---- 图表统计（纯 CSS/SVG） ---- */
+.dtok-charts{display:flex;flex-direction:column;gap:10px;min-width:0;}
+.dtok-chart-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 10px;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1);}
+.dtok-chart-toolbar-label{font-size:12px;color:var(--dsw-alias-label-secondary);flex:none;}
+.dtok-chart-toolbar-note{font-size:11px;color:var(--dsw-alias-label-tertiary,#94a3b8);margin-left:auto;}
+.dtok-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px;}
+.dtok-chart-card{border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1);padding:10px 12px;min-width:0;display:flex;flex-direction:column;gap:8px;}
+.dtok-chart-title{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
+.dtok-chart-sub{font-size:11px;font-weight:400;color:var(--dsw-alias-label-secondary);}
+.dtok-chart-empty{text-align:center;color:var(--dsw-alias-label-secondary);padding:28px 0;font-size:12px;}
+.dtok-donut-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
+.dtok-donut{width:150px;height:150px;flex:none;}
+.dtok-donut-v{font-size:6.5px;font-weight:700;fill:var(--dsw-alias-label-primary);}
+.dtok-donut-l{font-size:3.6px;fill:var(--dsw-alias-label-secondary);}
+.dtok-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;max-height:170px;overflow:auto;}
+.dtok-legend-row{display:flex;align-items:center;gap:6px;font-size:11px;min-width:0;}
+.dtok-dot{width:8px;height:8px;border-radius:50%;flex:none;}
+.dtok-legend-k{color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
+.dtok-legend-v{color:var(--dsw-alias-label-secondary);margin-left:auto;flex:none;}
+.dtok-hbars{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;}
+.dtok-hbar-row{display:flex;align-items:center;gap:8px;font-size:11px;min-width:0;}
+.dtok-hbar-k{flex:0 1 34%;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.dtok-hbar-track{flex:1;height:12px;border-radius:4px;background:rgb(127 127 127 / .16);overflow:hidden;min-width:40px;}
+.dtok-hbar-fill{display:block;height:100%;border-radius:4px;transition:width .3s ease;}
+.dtok-hbar-v{flex:none;color:var(--dsw-alias-label-secondary);min-width:52px;text-align:right;}
+.dtok-hours{display:flex;align-items:flex-end;gap:3px;height:130px;padding-top:4px;}
+.dtok-hour-col{flex:1;display:flex;align-items:flex-end;height:100%;min-width:0;}
+.dtok-hour-bar{display:block;width:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--dk-accent),rgb(127 127 127 / .25));min-height:2px;transition:height .3s ease;}
+.dtok-hour-col:hover .dtok-hour-bar{filter:brightness(1.3);}
 `;
 
 // ---------- 详情弹窗 ----------
@@ -702,6 +939,9 @@ export function TokenLogView(props) {
 	// 「单价设置」折叠面板：默认收起（费用不准确时才需要展开调整）
 	// 「单价设置」子弹窗：默认收起；支持经 params.openPricing 直接打开（深链/测试用）
 	const [showPricing, setShowPricing] = useState(() => !!(props && props.params && props.params.openPricing));
+	// 明细 | 图表 页签：图表全部基于当前筛选结果客户端聚合，不额外发请求。
+	// params.charts 支持深链/测试直接落在图表页签。
+	const [tab, setTab] = useState(() => (props && props.params && props.params.charts) ? "charts" : "detail");
 	// 查询完成信号：loading 由 true→false 时记一次时间戳，用于「✓ 数据已更新」提示与 KPI 卡回弹。
 	// 5 秒静默自动刷新不置 loading，所以轮询不会每 5 秒闪一下。
 	const [fetchedAt, setFetchedAt] = useState(0);
@@ -929,6 +1169,17 @@ export function TokenLogView(props) {
 
 	const bodyNodes = [];
 	if (err) bodyNodes.push(<div key="err" className="dtok-err">错误: {err}</div>);
+	bodyNodes.push(
+		<div key="tabs" className="dtok-filter" style={{ padding: "2px 0 0", border: "none", background: "transparent", gap: 4 }}>
+			<button className={"dtok-btn" + (tab === "detail" ? " primary" : "")} onClick={() => setTab("detail")}>明细</button>
+			<button className={"dtok-btn" + (tab === "charts" ? " primary" : "")} onClick={() => setTab("charts")}>图表统计</button>
+		</div>
+	);
+	if (tab === "charts") {
+		bodyNodes.push(
+			<ChartsPanel key={"charts-" + fetchedAt} records={records} rate={rateCny} />
+		);
+	} else {
 	if (cards.length) bodyNodes.push(
 		// key 带 fetchedAt：每次「手动查询 / 首次加载」拿到新数据时重建一次，KPI 卡重播回弹动画
 		<div className={"dtok-cards" + (fetchedAt ? " dtok-pop" : "")} key={"cards-" + fetchedAt}>
@@ -982,6 +1233,7 @@ export function TokenLogView(props) {
 		);
 		bodyNodes.push(pager("pager-bottom", "bottom"));
 	}
+	}
 
 	return (
 		<div className="dtok-root" onClick={(e) => e.stopPropagation()}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-dock",
-  "version": "0.11.3",
+  "version": "0.11.5",
   "description": "DeepSeek Harness 功能坞插件（dsh-dock）：模块化功能中枢——每个功能一个 features/ 模块（可单独提取成包发布，又可经 dockBridge 装回面板）。含用量记录（LLM 调用记账/费用统计，支持各模型自定义单价与多段分时价）、模型设置、图片理解代理、模型余额、任务动画（19 种运行动画 + 桌面伙伴 3D 场景）、任务通知（完成/异常/需确认通知、提示音、系统通知、钉钉/飞书推送）、运行状态（进行中任务与最近完成一览）；侧栏入口 + 可拖拽弹窗（最大化/最小化/缩放）。",
   "type": "module",
   "main": "index.js",