dsh-cost-meter 1.5.22 → 1.5.24

package/README.en.md

@@ -6,7 +6,7 @@
 
 Per-conversation cost · daily totals · OpenCode Go subscription quota display · budget with usage percentage · official account balance · custom provider balance · balance progress bar · history · peak/off-peak pricing hours display (peak hours UTC 01:00–04:00, 06:00–10:00) · pre-switch popup & system-notification alerts for peak/off-peak changes (position / lead time / alert type configurable) · one-click price sync from the official docs · Codex-style token usage heat grid · multi-vendor model pricing (built-in 90+ model price catalog with auto-matching) · mainstream Coding Plan quota queries & display (Anthropic / Z.ai / MiniMax / Kimi / OpenRouter / SiliconFlow / SCNet)
 
-[![version](https://img.shields.io/badge/version-1.5.22-4176E6)](https://github.com/Han-1413141/dsh-cost-meter)
+[![version](https://img.shields.io/badge/version-1.5.24-4176E6)](https://github.com/Han-1413141/dsh-cost-meter)
 [![npm](https://img.shields.io/npm/v/dsh-cost-meter?label=npm)](https://www.npmjs.com/package/dsh-cost-meter)
 [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE)
 [![dsh](https://img.shields.io/badge/DeepSeek%20Harness-dsh--plugin-4176E6)](https://github.com/deepseek-ai/deepseek-harness)
@@ -194,22 +194,22 @@ Real captures from an actual DSH sidebar of the period strip and collapsed verti
 dsh plugin --profile web add dsh-cost-meter
 ```
 
-**PowerShell one-click script** (copy the whole line, paste, press Enter; pnpm is provisioned automatically, git is auto-detected — no clone needed; the install chain is **pinned to the release tag `v1.5.22`** — review the script before running):
+**PowerShell one-click script** (copy the whole line, paste, press Enter; pnpm is provisioned automatically, git is auto-detected — no clone needed; the install chain is **pinned to the release tag `v1.5.24`** — review the script before running):
 
 ```powershell
-irm https://raw.githubusercontent.com/Han-1413141/dsh-cost-meter/v1.5.22/install.ps1 | iex
+irm https://raw.githubusercontent.com/Han-1413141/dsh-cost-meter/v1.5.24/install.ps1 | iex
 ```
 
 **Or a plain command line** (the machine must already have pnpm and git; also pinned to the tag):
 
 ```sh
-dsh plugin --profile web add github:Han-1413141/dsh-cost-meter#v1.5.22
+dsh plugin --profile web add github:Han-1413141/dsh-cost-meter#v1.5.24
 ```
 
 Without git, use the GitHub tag archive:
 
 ```sh
-dsh plugin --profile web add https://github.com/Han-1413141/dsh-cost-meter/archive/refs/tags/v1.5.22.tar.gz
+dsh plugin --profile web add https://github.com/Han-1413141/dsh-cost-meter/archive/refs/tags/v1.5.24.tar.gz
 ```
 
 After installing, **restart** `dsh web` (plugin rows, the Typert manifest and the client bundle are all scanned at startup):

package/README.md

@@ -6,7 +6,7 @@
 
 本会话费用 · 当日费用 · OpenCode Go 订阅额度显示 · 预算与已用百分比 · 官方账户余额 · 自定义 Provider 余额查询(可配任意 HTTP 端点) · 余额三段进度条 · 历史记录 · 峰谷计价时段显示(UTC 01:00–04:00、06:00–10:00 为峰时段) · 峰/谷切换前弹窗与系统通知提醒(位置/提前量/提醒类型可配) · 官方价格一键同步 · 类 Codex Token 用量热图 · 多厂商多模型价格计费(内置 90+ 模型价格目录与自动匹配) · 主流 Coding Plan 额度查询与显示(Anthropic / Z.ai / MiniMax / Kimi / OpenRouter / SiliconFlow / SCNet 七家)
 
-[![version](https://img.shields.io/badge/version-1.5.22-4176E6)](https://github.com/Han-1413141/dsh-cost-meter)
+[![version](https://img.shields.io/badge/version-1.5.24-4176E6)](https://github.com/Han-1413141/dsh-cost-meter)
 [![npm](https://img.shields.io/npm/v/dsh-cost-meter?label=npm)](https://www.npmjs.com/package/dsh-cost-meter)
 [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE)
 [![dsh](https://img.shields.io/badge/DeepSeek%20Harness-dsh--plugin-4176E6)](https://github.com/deepseek-ai/deepseek-harness)
@@ -196,22 +196,22 @@
 dsh plugin --profile web add dsh-cost-meter
 ```
 
-**PowerShell 一键脚本**(复制整行粘贴回车;自动补齐 pnpm、自动探测 git,无需克隆仓库;安装链**固定到发布 tag `v1.5.22`**,建议先下载审阅再运行):
+**PowerShell 一键脚本**(复制整行粘贴回车;自动补齐 pnpm、自动探测 git,无需克隆仓库;安装链**固定到发布 tag `v1.5.24`**,建议先下载审阅再运行):
 
 ```powershell
-irm https://raw.githubusercontent.com/Han-1413141/dsh-cost-meter/v1.5.22/install.ps1 | iex
+irm https://raw.githubusercontent.com/Han-1413141/dsh-cost-meter/v1.5.24/install.ps1 | iex
 ```
 
 **或直接命令行**(机器上需已有 pnpm 与 git;同样固定到 tag):
 
 ```sh
-dsh plugin --profile web add github:Han-1413141/dsh-cost-meter#v1.5.22
+dsh plugin --profile web add github:Han-1413141/dsh-cost-meter#v1.5.24
 ```
 
 没有 git 时可用 GitHub tag 打包直链:
 
 ```sh
-dsh plugin --profile web add https://github.com/Han-1413141/dsh-cost-meter/archive/refs/tags/v1.5.22.tar.gz
+dsh plugin --profile web add https://github.com/Han-1413141/dsh-cost-meter/archive/refs/tags/v1.5.24.tar.gz
 ```
 
 安装后**重启** `dsh web`(插件行、Typert 清单与客户端 bundle 均在启动时扫描):

package/lib/client.js

@@ -71,6 +71,13 @@ window.__ModuleLoader__.load({
       '.cm-toolbar .cm-field{flex-direction:row;align-items:center;gap:8px}',
       '.cm-toolbar .cm-field label{margin:0;font-size:12px;color:var(--dsw-alias-label-tertiary)}',
       '.cm-toolbar .cm-input{min-width:150px;padding:4px 10px}',
+      // 设置页标签栏(issue #29):左侧分组标签,右侧常驻自动保存状态。
+      '.cm-tabs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--dsh-alias-border-l1);padding-bottom:10px}',
+      '.cm-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}',
+      '.cm-tab{font:inherit;font-size:13px;color:var(--dsw-alias-label-secondary);background:transparent;border:none;border-radius:8px;padding:6px 14px;cursor:pointer;white-space:nowrap}',
+      '.cm-tab:hover{background:var(--dsw-alias-interactive-bg-hover)}',
+      '.cm-tab.active{background:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-label-primary-inverted);font-weight:600}',
+      '.cm-tabs-row .cm-msg{padding:2px 10px}',
       '.cm-note{font-size:12px;color:var(--dsw-alias-label-tertiary);margin:0}',
       '.cm-table{width:100%;border-collapse:collapse;font-size:12px}',
       '.cm-table th,.cm-table td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--dsw-alias-border-l1);white-space:nowrap}',
@@ -556,6 +563,13 @@ window.__ModuleLoader__.load({
         usagePositionGeneral: '通用设置',
         usagePositionSection: '独立分节(用量)',
         displaySettings: '显示设置',
+        // 设置页标签(issue #29)
+        tabOverview: '概览',
+        tabQuotas: '额度',
+        tabUsage: '用量',
+        tabPricing: '价格',
+        tabDisplay: '显示',
+        historyDataTitle: '历史数据',
         positionLabel: '会话费用显示位置',
         positionDock: '输入区下方',
         positionHeader: '会话标题栏',
@@ -880,6 +894,13 @@ window.__ModuleLoader__.load({
         usagePositionGeneral: 'General settings',
         usagePositionSection: 'Own section (Usage)',
         displaySettings: 'Display settings',
+        // Settings tabs (issue #29)
+        tabOverview: 'Overview',
+        tabQuotas: 'Quotas',
+        tabUsage: 'Usage',
+        tabPricing: 'Pricing',
+        tabDisplay: 'Display',
+        historyDataTitle: 'History data',
         positionLabel: 'Session cost display position',
         positionDock: 'Below the composer',
         positionHeader: 'Session title bar',
@@ -3892,6 +3913,8 @@ window.__ModuleLoader__.load({
       const [busy, setBusy] = useState(false)
       // 价格表折叠开关(默认收起,保持设置页简洁;三角按钮展开)。
       const [priceOpen, setPriceOpen] = useState(false)
+      // 设置页当前标签(issue #29):概览/额度/用量/价格/显示;仅切可见分区,不拆配置与保存逻辑。
+      const [tab, setTab] = useState('overview')
       // 自动保存状态:idle(无改动) | saving | saved | error。
       const [saveState, setSaveState] = useState({ status: 'idle', at: 0, error: null })
       const savedRef = React.useRef(null)
@@ -4028,39 +4051,34 @@ window.__ModuleLoader__.load({
             isDefault: false, draft, setDraft, t,
           })
         ))
+      // 设置页标签(issue #29):按用途分五组,切换只改可见分区,不拆配置模型与保存逻辑。
+      const tabItems = [
+        ['overview', t('tabOverview')],
+        ['quotas', t('tabQuotas')],
+        ['usage', t('tabUsage')],
+        ['pricing', t('tabPricing')],
+        ['display', t('tabDisplay')],
+      ]
+      // 自动保存状态常驻标签栏右侧:在任意标签页改动配置都能看到保存反馈。
+      const saveBadge = saveState.status === 'saving'
+        ? el('span', { className: 'cm-hint' }, t('saving'))
+        : saveState.status === 'error'
+          ? el('span', { className: 'cm-msg err' }, t('autoSaveFailed', { message: saveState.error ?? '' }))
+          : el('span', { className: 'cm-hint' }, saveState.status === 'saved' ? t('autoSavedAt', { time: new Date(saveState.at).toLocaleTimeString() }) : t('autoSaveHint'))
       return el('div', { className: 'cm-section' },
-        // 顶栏:界面语言(打开费用设置即见)
-        el('div', { className: 'cm-toolbar' },
-          el('div', { className: 'cm-field' },
-            el('label', null, t('languageLabel')),
-            el('select', {
-              className: 'cm-input',
-              value: draft?.locale ?? 'auto',
-              onChange: event => setField('locale', event.target.value),
-            },
-              el('option', { value: 'auto' }, t('localeAuto')),
-              el('option', { value: 'zh' }, t('localeZh')),
-              el('option', { value: 'en' }, t('localeEn'))))),
-        // Token 用量统计(费用设置最上方)
-        (!USAGE_POSITION_SWITCHABLE || (config.usage?.position ?? 'cost') === 'cost')
-          ? el(UsagePanel, { state, t, locale })
-          : null,
-        // 按模型统计(紧随用量统计;今日/近90天:费用、token、缓存命中率、性价比)
-        el(ModelStatsPanel, { state, config: draft ?? config, t }),
-        // OpenCode Go 订阅额度(含启用开关,像预算面板一样常驻)
-        el(GoQuotaPanel, { state, api, t, draft, setDraft }),
-        // Coding Plan 额度(Anthropic / Z.ai·GLM / MiniMax,各家独立开关)
-        el(CodingPlansPanel, { state, api, t, draft, setDraft }),
-        // 自定义 Provider 余额(可配置 HTTP 查询;与 Coding Plan 同区,可折叠)
-        el(CustomBalancePanel, { state, api, t, draft, setDraft }),
-        // 预算(紧随其后)
-        el(BudgetPanel, { state, draft, setDraft, t }),
-        // 峰谷计价与提示(独立面板:启用/提示开关、样式切换、时段条预览)
-        el(PeakPanel, { state, draft, setDraft, t }),
-        // 官方余额(按显示配置)
-        (config.balance?.display === 'settings' || config.balance?.display === 'both')
-          ? el(BalancePanel, { state, api, t, draft, setDraft })
-          : null,
+        // 标签栏:概览/额度/用量/价格/显示;右侧为全局自动保存状态。
+        el('div', { className: 'cm-tabs-row' },
+          el('div', { className: 'cm-tabs', role: 'tablist' },
+            tabItems.map(([id, label]) => el('button', {
+              key: id, type: 'button', role: 'tab', 'aria-selected': String(tab === id),
+              className: 'cm-tab' + (tab === id ? ' active' : ''),
+              onClick: () => setTab(id),
+            }, label))),
+          saveBadge),
+        // 操作结果提示(价格同步/历史导入/清除):全局展示,不随触发按钮所在标签页。
+        message !== null ? el('div', { className: 'cm-msg ' + message.kind }, message.text) : null,
+        // ── 概览:汇总卡片、今日会话、预算、官方余额 ──
+        tab === 'overview' ? el(Fragment, { key: 'overview' },
         // 汇总卡片
         el('div', { className: 'cm-cards' },
           el(Card, {
@@ -4092,10 +4110,66 @@ window.__ModuleLoader__.load({
         el('div', null,
           el('h3', { className: 'cm-h' }, t('todaySessions')),
           el(TodaySessions, { state, t })),
+        // 预算
+        el(BudgetPanel, { state, draft, setDraft, t }),
+        // 官方余额(按显示配置)
+        (config.balance?.display === 'settings' || config.balance?.display === 'both')
+          ? el(BalancePanel, { state, api, t, draft, setDraft })
+          : null)
+        : null,
+        // ── 额度:OpenCode Go、Coding Plan、自定义 Provider 余额 ──
+        tab === 'quotas' ? el(Fragment, { key: 'quotas' },
+        // OpenCode Go 订阅额度(含启用开关,像预算面板一样常驻)
+        el(GoQuotaPanel, { state, api, t, draft, setDraft }),
+        // Coding Plan 额度(Anthropic / Z.ai·GLM / MiniMax,各家独立开关)
+        el(CodingPlansPanel, { state, api, t, draft, setDraft }),
+        // 自定义 Provider 余额(可配置 HTTP 查询;与 Coding Plan 同区,可折叠)
+        el(CustomBalancePanel, { state, api, t, draft, setDraft }))
+        : null,
+        // ── 用量:热图、按模型统计、历史、按会话统计、历史数据操作 ──
+        tab === 'usage' ? el(Fragment, { key: 'usage' },
+        // Token 用量统计(position=cost 时留在费用分节;移至通用/独立分节后不在此渲染)
+        (!USAGE_POSITION_SWITCHABLE || (config.usage?.position ?? 'cost') === 'cost')
+          ? el(UsagePanel, { state, t, locale })
+          : null,
+        // 按模型统计(今日/近90天:费用、token、缓存命中率、性价比)
+        el(ModelStatsPanel, { state, config: draft ?? config, t }),
         // 历史(三角折叠面板;日期行可再展开会话明细)
         el(HistoryPanel, { state, api }),
         // 按会话统计(全部历史,不分日期;issue #22)
         el(SessionRankPanel, { state, api }),
+        // 历史数据操作(导入安装前历史/清除全部历史;与用量统计同组)
+        el('div', null,
+          el('h3', { className: 'cm-h' }, t('historyDataTitle')),
+          el('div', { className: 'cm-buttons' },
+            confirmImport
+              ? el(Fragment, null,
+                el('span', { className: 'cm-hint' }, t('confirmImportLegacy')),
+                el('button', { className: 'cm-btn', onClick: doImportLegacy, disabled: busy }, t('apply')),
+                el('button', { className: 'cm-btn', onClick: () => setConfirmImport(false) }, t('cancel')))
+              : el('button', { className: 'cm-btn', onClick: () => setConfirmImport(true), disabled: busy }, t('importLegacy')),
+            confirmReset
+              ? el(Fragment, null,
+                el('span', { className: 'cm-hint' }, t('confirmReset')),
+                el('button', { className: 'cm-btn danger', onClick: doReset, disabled: busy }, t('confirmClear')),
+                el('button', { className: 'cm-btn', onClick: () => setConfirmReset(false) }, t('cancel')))
+              : el('button', { className: 'cm-btn danger', onClick: () => setConfirmReset(true), disabled: busy }, t('clearAllHistory'))),
+          el('p', { className: 'cm-note' }, t('legacyImportNote'))))
+        : null,
+        // ── 显示:界面语言、徽章/侧边栏位置、图框开关等 ──
+        tab === 'display' ? el(Fragment, { key: 'display' },
+        // 顶栏:界面语言
+        el('div', { className: 'cm-toolbar' },
+          el('div', { className: 'cm-field' },
+            el('label', null, t('languageLabel')),
+            el('select', {
+              className: 'cm-input',
+              value: draft?.locale ?? 'auto',
+              onChange: event => setField('locale', event.target.value),
+            },
+              el('option', { value: 'auto' }, t('localeAuto')),
+              el('option', { value: 'zh' }, t('localeZh')),
+              el('option', { value: 'en' }, t('localeEn'))))),
         // 显示设置
         el('div', null,
           el('h3', { className: 'cm-h' }, t('displaySettings')),
@@ -4323,7 +4397,12 @@ window.__ModuleLoader__.load({
                   },
                 }),
                 el('span', null, t('budgetDetailLabel'))))),
-          el('p', { className: 'cm-note' }, t('badgeNote'))),
+          el('p', { className: 'cm-note' }, t('badgeNote'))))
+        : null,
+        // ── 价格:价格表、模型名匹配、拓展价格表、峰谷计价与提示、官方价格同步 ──
+        tab === 'pricing' ? el(Fragment, { key: 'pricing' },
+        // 峰谷计价与提示(独立面板:启用/提示开关、样式切换、时段条预览)
+        el(PeakPanel, { state, draft, setDraft, t }),
         // 价格表(可折叠,默认收起;priceTableDisplay 按模型门控:未勾选直接显示的模型收入拓展价格表,该开关只决定展示位置)
         el('div', null,
           el('button', { type: 'button', className: 'cm-collapse-h', 'aria-expanded': String(priceOpen), onClick: () => setPriceOpen(!priceOpen) },
@@ -4423,38 +4502,20 @@ window.__ModuleLoader__.load({
         })(),
         // 拓展价格表(厂商/家族分类目录;挂载 ↔ 费用设置价格表)
         el(PriceCatalogPanel, { state, draft, setDraft, t }),
-        // 操作
+        // 官方价格同步(与价格表同组;自动保存状态已移至标签栏常驻)
         el('div', null,
           el('h3', { className: 'cm-h' }, t('dataSync')),
           el('div', { className: 'cm-buttons' },
-            saveState.status === 'saving'
-              ? el('span', { className: 'cm-hint' }, t('saving'))
-              : saveState.status === 'error'
-                ? el('span', { className: 'cm-msg err' }, t('autoSaveFailed', { message: saveState.error ?? '' }))
-                : el('span', { className: 'cm-hint' }, saveState.status === 'saved' ? t('autoSavedAt', { time: new Date(saveState.at).toLocaleTimeString() }) : t('autoSaveHint')),
             confirmFetch
               ? el(Fragment, null,
                 el('span', { className: 'cm-hint' }, t('confirmFetch')),
                 el('button', { className: 'cm-btn', onClick: doFetch, disabled: busy }, t('apply')),
                 el('button', { className: 'cm-btn', onClick: () => setConfirmFetch(false) }, t('cancel')))
-              : el('button', { className: 'cm-btn', onClick: () => setConfirmFetch(true), disabled: busy }, t('syncFromDocs')),
-            confirmImport
-              ? el(Fragment, null,
-                el('span', { className: 'cm-hint' }, t('confirmImportLegacy')),
-                el('button', { className: 'cm-btn', onClick: doImportLegacy, disabled: busy }, t('apply')),
-                el('button', { className: 'cm-btn', onClick: () => setConfirmImport(false) }, t('cancel')))
-              : el('button', { className: 'cm-btn', onClick: () => setConfirmImport(true), disabled: busy }, t('importLegacy')),
-            confirmReset
-              ? el(Fragment, null,
-                el('span', { className: 'cm-hint' }, t('confirmReset')),
-                el('button', { className: 'cm-btn danger', onClick: doReset, disabled: busy }, t('confirmClear')),
-                el('button', { className: 'cm-btn', onClick: () => setConfirmReset(false) }, t('cancel')))
-              : el('button', { className: 'cm-btn danger', onClick: () => setConfirmReset(true), disabled: busy }, t('clearAllHistory'))),
+              : el('button', { className: 'cm-btn', onClick: () => setConfirmFetch(true), disabled: busy }, t('syncFromDocs'))),
           el('p', { className: 'cm-note' },
             t('lastSync', { time: config.fetchedAt !== null ? new Date(config.fetchedAt).toLocaleString() : t('neverSynced') })
-            + t('source', { source: config.priceSource === 'official' ? t('sourceOfficial') : t('sourceBundled') })),
-          el('p', { className: 'cm-note' }, t('legacyImportNote')),
-          message !== null ? el('div', { className: 'cm-msg ' + message.kind }, message.text) : null))
+            + t('source', { source: config.priceSource === 'official' ? t('sourceOfficial') : t('sourceBundled') }))))
+        : null)
     }
 
     // ── 插件主体 ────────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-cost-meter",
-  "version": "1.5.22",
+  "version": "1.5.24",
   "description": "DeepSeek Harness 会话费用统计插件:本会话成本、当日费用、历史记录与官方价格同步,支持多厂商多模型价格计费(内置 90+ 模型价格目录与自动匹配)、主流 Coding Plan 订阅额度查询与显示(7 家,含 SCNet Token Plan 本地 Credits 计量)、自定义 Provider 余额查询(可配任意 HTTP 端点)与余额进度条、峰谷计价时段显示与切换前弹窗/系统通知提醒(位置/提前量/类型可配),界面中英双语。Session cost tracking plugin for DeepSeek Harness: per-conversation cost, daily totals, history and official price sync, with multi-vendor model pricing (built-in 90+ model catalog with auto-matching), Coding Plan quota queries & display for 7 vendors (incl. local credits metering for the SCNet Token Plan), custom provider balance lookup (configurable HTTP endpoint) and balance progress bar, plus peak/off-peak pricing display with pre-switch popup & system-notification alerts (position / lead time / type configurable), in a bilingual (Chinese/English) UI.",
   "type": "module",
   "main": "lib/index.js",