@dijkspicy/opencode-stats-reporter 0.1.0

package/panel/js/charts.js

@@ -0,0 +1,241 @@
+/**
+ * ECharts 封装：初始化、深浅主题、resize、销毁重建
+ * 深色用 ECharts 内置 dark 主题；主题切换时 dispose 后重新 init
+ */
+(function () {
+  'use strict';
+
+  var instances = {}; // name -> echarts instance
+
+  function isDark() {
+    return document.documentElement.getAttribute('data-theme') === 'dark';
+  }
+
+  /** 初始化（已存在则先销毁）。返回实例或 null（DOM 不存在时） */
+  function init(name, el) {
+    if (!el) return null;
+    dispose(name);
+    var chart = window.echarts.init(el, isDark() ? 'dark' : null, { renderer: 'canvas' });
+    instances[name] = chart;
+    return chart;
+  }
+
+  function dispose(name) {
+    if (instances[name]) {
+      instances[name].dispose();
+      delete instances[name];
+    }
+  }
+
+  /** 销毁全部图表（主题切换时调用） */
+  function disposeAll() {
+    Object.keys(instances).forEach(dispose);
+  }
+
+  function resizeAll() {
+    Object.keys(instances).forEach(function (k) { instances[k].resize(); });
+  }
+
+  // 窗口尺寸变化时统一 resize（防抖）
+  var resizeTimer = null;
+  window.addEventListener('resize', function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(resizeAll, 150);
+  });
+
+  // ---- 公共配色（两套主题下都清晰可读）----
+  var COLOR_UNCACHED = '#4c9aff';  // 输入·缓存未命中
+  var COLOR_CACHED = '#9254de';    // 输入·缓存命中
+  var COLOR_RSP = '#36cfc9';       // 输出 tokens
+  var COLOR_LINE = '#f7b500';      // 请求数折线
+  var PALETTE = ['#4c9aff', '#36cfc9', '#f7b500', '#ff7a45', '#9254de', '#73d13d', '#ff85c0', '#40a9ff'];
+
+  function baseTooltip() {
+    return {
+      trigger: 'axis',
+      backgroundColor: isDark() ? '#2b2f36' : '#fff',
+      borderColor: isDark() ? '#444' : '#ddd',
+      textStyle: { color: isDark() ? '#e8e8e8' : '#333', fontSize: 12 }
+    };
+  }
+
+  /**
+   * token 三类堆叠柱 + 请求数折线（副轴）的通用 option
+   * items: [{ label, tipTitle, uncached, cached, rsp, cnt, complete }]
+   * 未完结桶（complete=false）柱子降透明度
+   */
+  function stackOption(items, fmt) {
+    var labels = [], uncached = [], cached = [], rsp = [], cnt = [];
+    items.forEach(function (it) {
+      labels.push(it.label);
+      var barStyle = it.complete === false ? { opacity: 0.45 } : undefined;
+      uncached.push({ value: it.uncached, itemStyle: barStyle });
+      cached.push({ value: it.cached, itemStyle: barStyle });
+      rsp.push({ value: it.rsp, itemStyle: barStyle });
+      cnt.push(it.cnt);
+    });
+    return {
+      color: [COLOR_UNCACHED, COLOR_CACHED, COLOR_RSP, COLOR_LINE],
+      tooltip: Object.assign(baseTooltip(), {
+        formatter: function (params) {
+          var idx = params[0].dataIndex;
+          var it = items[idx];
+          var html = it.tipTitle + (it.complete === false ? '（进行中）' : '') + '<br/>';
+          params.forEach(function (p) {
+            html += p.marker + p.seriesName + '：' + fmt.fullNumber(p.value) + '<br/>';
+          });
+          var totalIn = it.uncached + it.cached;
+          html += '输入合计：' + fmt.fullNumber(totalIn)
+            + '（缓存命中 ' + fmt.hitRate(totalIn > 0 ? it.cached / totalIn : null) + '）';
+          return html;
+        }
+      }),
+      legend: { data: ['输入（缓存未命中）', '输入（缓存命中）', '输出 Tokens', '请求数'], top: 0 },
+      grid: { left: 60, right: 56, top: 36, bottom: 28 },
+      xAxis: { type: 'category', data: labels, axisTick: { alignWithLabel: true } },
+      yAxis: [
+        { type: 'value', name: 'Tokens', axisLabel: { formatter: function (v) { return fmt.abbrev(v); } } },
+        { type: 'value', name: '请求数', splitLine: { show: false }, axisLabel: { formatter: function (v) { return fmt.abbrev(v); } } }
+      ],
+      series: [
+        { name: '输入（缓存未命中）', type: 'bar', stack: 'tokens', data: uncached, barMaxWidth: 32 },
+        { name: '输入（缓存命中）', type: 'bar', stack: 'tokens', data: cached, barMaxWidth: 32 },
+        { name: '输出 Tokens', type: 'bar', stack: 'tokens', data: rsp, barMaxWidth: 32 },
+        { name: '请求数', type: 'line', yAxisIndex: 1, data: cnt, smooth: true, symbolSize: 6, lineStyle: { width: 2 } }
+      ]
+    };
+  }
+
+  /**
+   * 每日用量趋势：输入拆分为 缓存未命中/缓存命中（OpenAI 规范 req 含命中），
+   * 与输出三类堆叠 + 请求数折线
+   */
+  function trendOption(rows, fmt) {
+    var items = rows.map(function (r) {
+      var cached = r.cached_tokens || 0;
+      return {
+        label: fmt.shortDate(r.date),
+        tipTitle: r.date,
+        uncached: Math.max((r.req_tokens || 0) - cached, 0),
+        cached: cached,
+        rsp: r.rsp_tokens || 0,
+        cnt: r.request_count || 0,
+        complete: r.complete
+      };
+    });
+    return stackOption(items, fmt);
+  }
+
+  /** 今日分时：整点小时桶，当前未完结小时降透明度 */
+  function hourlyOption(rows, fmt) {
+    var items = rows.map(function (r) {
+      var cached = r.cached_tokens || 0;
+      return {
+        label: fmt.hourLabel(r.ts),
+        tipTitle: fmt.hourLabel(r.ts) + ' - ' + fmt.hourLabel(r.ts + 3600),
+        uncached: Math.max((r.req_tokens || 0) - cached, 0),
+        cached: cached,
+        rsp: r.rsp_tokens || 0,
+        cnt: r.request_count || 0,
+        complete: r.complete
+      };
+    });
+    return stackOption(items, fmt);
+  }
+
+  /** 模型分布：横向条形图，Top 10，其余合并"其他"；按 total_tokens 降序 */
+  function modelBarOption(list, fmt) {
+    var sorted = list.slice().sort(function (a, b) { return b.total_tokens - a.total_tokens; });
+    var top = sorted.slice(0, 10);
+    var rest = sorted.slice(10);
+    if (rest.length) {
+      top.push({
+        model: '其他（' + rest.length + ' 个模型）',
+        total_tokens: rest.reduce(function (s, r) { return s + r.total_tokens; }, 0),
+        req_tokens: rest.reduce(function (s, r) { return s + (r.req_tokens || 0); }, 0),
+        rsp_tokens: rest.reduce(function (s, r) { return s + (r.rsp_tokens || 0); }, 0),
+        cached_tokens: rest.reduce(function (s, r) { return s + (r.cached_tokens || 0); }, 0),
+        request_count: rest.reduce(function (s, r) { return s + r.request_count; }, 0)
+      });
+    }
+    var names = top.map(function (r) { return r.model; }).reverse();
+    var values = top.map(function (r) { return r.total_tokens; }).reverse();
+    return {
+      color: [COLOR_UNCACHED],
+      tooltip: {
+        trigger: 'item',
+        backgroundColor: isDark() ? '#2b2f36' : '#fff',
+        borderColor: isDark() ? '#444' : '#ddd',
+        textStyle: { color: isDark() ? '#e8e8e8' : '#333', fontSize: 12 },
+        formatter: function (p) {
+          var d = top[top.length - 1 - p.dataIndex];
+          var cached = d.cached_tokens || 0;
+          return p.name
+            + '<br/>输入（缓存未命中）：' + fmt.fullNumber(Math.max((d.req_tokens || 0) - cached, 0))
+            + '<br/>输入（缓存命中）：' + fmt.fullNumber(cached)
+            + '<br/>输出：' + fmt.fullNumber(d.rsp_tokens || 0)
+            + '<br/>请求数：' + fmt.fullNumber(d.request_count || 0);
+        }
+      },
+      grid: { left: 8, right: 60, top: 8, bottom: 8, containLabel: true },
+      xAxis: { type: 'value', axisLabel: { formatter: function (v) { return fmt.abbrev(v); } } },
+      yAxis: { type: 'category', data: names, axisLabel: { width: 130, overflow: 'truncate' } },
+      series: [{
+        type: 'bar', data: values, barMaxWidth: 18,
+        label: { show: true, position: 'right', formatter: function (p) { return fmt.abbrev(p.value); } },
+        itemStyle: { borderRadius: [0, 4, 4, 0] }
+      }]
+    };
+  }
+
+  /** 供应商分布：环形图，中心显示总请求数 */
+  function providerDonutOption(list, fmt) {
+    var totalReq = list.reduce(function (s, r) { return s + (r.request_count || 0); }, 0);
+    var data = list.map(function (r) {
+      return { name: r.provider, value: r.total_tokens, requestCount: r.request_count, share: r.share };
+    });
+    return {
+      color: PALETTE,
+      tooltip: {
+        trigger: 'item',
+        backgroundColor: isDark() ? '#2b2f36' : '#fff',
+        borderColor: isDark() ? '#444' : '#ddd',
+        textStyle: { color: isDark() ? '#e8e8e8' : '#333', fontSize: 12 },
+        formatter: function (p) {
+          var d = p.data;
+          return d.name + '<br/>Tokens：' + fmt.fullNumber(d.value)
+            + '<br/>请求数：' + fmt.fullNumber(d.requestCount)
+            + '<br/>占比：' + fmt.hitRate(d.share);
+        }
+      },
+      legend: { bottom: 0, type: 'scroll' },
+      title: {
+        text: fmt.fullNumber(totalReq),
+        subtext: '总请求数',
+        left: 'center', top: '38%',
+        textStyle: { fontSize: 20, fontWeight: 600, color: isDark() ? '#e8e8e8' : '#222' },
+        subtextStyle: { fontSize: 12, color: isDark() ? '#999' : '#888' }
+      },
+      series: [{
+        type: 'pie', radius: ['52%', '72%'], center: ['50%', '46%'],
+        avoidLabelOverlap: true,
+        label: { show: false },
+        emphasis: { label: { show: true, formatter: '{b}\n{d}%', fontSize: 13 } },
+        data: data
+      }]
+    };
+  }
+
+  window.BRU = window.BRU || {};
+  window.BRU.charts = {
+    init: init,
+    dispose: dispose,
+    disposeAll: disposeAll,
+    resizeAll: resizeAll,
+    trendOption: trendOption,
+    hourlyOption: hourlyOption,
+    modelBarOption: modelBarOption,
+    providerDonutOption: providerDonutOption,
+    isDark: isDark
+  };
+})();

package/panel/js/config.js

@@ -0,0 +1,125 @@
+/**
+ * 配置读取 / 校验 / localStorage 覆盖
+ * 优先级：localStorage > config.js（window.APP_CONFIG）
+ */
+(function () {
+  'use strict';
+
+  var STORAGE_KEY = 'blueregion-usage.config.v1';
+
+  var DEFAULTS = {
+    trendDays: 14,
+    theme: 'auto',
+    numberStyle: 'wan',
+    dailyCreditLimit: null,
+    weeklyCreditLimit: null,
+    monthlyCreditLimit: null
+  };
+
+  /** 读取 localStorage 中的覆盖配置（无则返回 null） */
+  function readLocal() {
+    try {
+      var raw = window.localStorage.getItem(STORAGE_KEY);
+      if (!raw) return null;
+      var obj = JSON.parse(raw);
+      return (obj && typeof obj === 'object') ? obj : null;
+    } catch (e) {
+      return null; // localStorage 不可用或内容损坏时静默降级
+    }
+  }
+
+  /** 合并配置：localStorage 覆盖 config.js，再补默认值 */
+  function load() {
+    var fileCfg = (typeof window.APP_CONFIG === 'object' && window.APP_CONFIG) || {};
+    var localCfg = readLocal() || {};
+    var merged = {};
+    var keys = ['gatewayBaseUrl', 'apiKey', 'trendDays', 'theme', 'numberStyle',
+      'dailyCreditLimit', 'weeklyCreditLimit', 'monthlyCreditLimit'];
+    keys.forEach(function (k) {
+      if (localCfg[k] !== undefined && localCfg[k] !== null && localCfg[k] !== '') merged[k] = localCfg[k];
+      else if (fileCfg[k] !== undefined && fileCfg[k] !== null && fileCfg[k] !== '') merged[k] = fileCfg[k];
+      else if (DEFAULTS[k] !== undefined) merged[k] = DEFAULTS[k];
+    });
+    return merged;
+  }
+
+  /**
+   * 校验配置，返回 { ok, errors: string[], cfg }
+   * gatewayBaseUrl 必须是合法 http(s) URL；apiKey 必填
+   */
+  function validate(cfg) {
+    var errors = [];
+    cfg = cfg || {};
+
+    var base = (cfg.gatewayBaseUrl || '').trim();
+    if (!base) {
+      errors.push('网关地址（gatewayBaseUrl）必填');
+    } else {
+      try {
+        var u = new URL(base);
+        if (u.protocol !== 'http:' && u.protocol !== 'https:') {
+          errors.push('网关地址必须是 http(s) URL');
+        }
+      } catch (e) {
+        errors.push('网关地址不是合法 URL');
+      }
+    }
+
+    if (!(cfg.apiKey || '').trim()) {
+      errors.push('API Key（apiKey）必填');
+    }
+
+    var days = Number(cfg.trendDays);
+    if (cfg.trendDays !== undefined && cfg.trendDays !== '') {
+      if (!isFinite(days) || days < 1 || days > 15) errors.push('trendDays 必须在 1-15 之间');
+    }
+
+    if (cfg.theme && ['auto', 'light', 'dark'].indexOf(cfg.theme) < 0) {
+      errors.push('theme 只能是 auto / light / dark');
+    }
+    if (cfg.numberStyle && ['wan', 'intl'].indexOf(cfg.numberStyle) < 0) {
+      errors.push('numberStyle 只能是 wan / intl');
+    }
+
+    // 限额类字段：空表示不限，否则必须是非负数字
+    ['dailyCreditLimit', 'weeklyCreditLimit', 'monthlyCreditLimit'].forEach(function (k) {
+      var raw = cfg[k];
+      if (raw === undefined || raw === null || raw === '') return;
+      var n = Number(raw);
+      if (!isFinite(n) || n < 0) errors.push(k + ' 必须是非负数字');
+    });
+
+    return { ok: errors.length === 0, errors: errors, cfg: cfg };
+  }
+
+  /** 保存到 localStorage（记住配置） */
+  function saveLocal(cfg) {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(cfg));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /** 清除 localStorage 覆盖配置 */
+  function clearLocal() {
+    try { window.localStorage.removeItem(STORAGE_KEY); } catch (e) { /* ignore */ }
+  }
+
+  /** 是否存在 localStorage 覆盖配置 */
+  function hasLocal() {
+    return readLocal() !== null;
+  }
+
+  window.BRU = window.BRU || {};
+  window.BRU.config = {
+    load: load,
+    validate: validate,
+    saveLocal: saveLocal,
+    clearLocal: clearLocal,
+    hasLocal: hasLocal,
+    readLocal: readLocal,
+    DEFAULTS: DEFAULTS
+  };
+})();

package/panel/js/format.js

@@ -0,0 +1,156 @@
+/**
+ * 数字 / 百分比 / 延迟 / 日期格式化工具
+ * - 卡片与坐标轴用缩写（wan / intl 两种风格）
+ * - tooltip 与表格永远显示完整千分位
+ */
+(function () {
+  'use strict';
+
+  /** 千分位完整数字，如 2,453,824；非法值返回 -- */
+  function fullNumber(n) {
+    if (n === null || n === undefined || !isFinite(Number(n))) return '--';
+    return Number(n).toLocaleString('en-US');
+  }
+
+  /**
+   * 大数字缩写
+   * wan 模式：<1万 原值千分位；>=1万 x.x 万；>=1亿 x.xx 亿
+   * intl 模式：K / M / B
+   */
+  function abbrev(n, style) {
+    if (n === null || n === undefined || !isFinite(Number(n))) return '--';
+    n = Number(n);
+    var neg = n < 0 ? '-' : '';
+    n = Math.abs(n);
+    if (style === 'intl') {
+      if (n >= 1e9) return neg + (n / 1e9).toFixed(2) + 'B';
+      if (n >= 1e6) return neg + (n / 1e6).toFixed(1) + 'M';
+      if (n >= 1e3) return neg + (n / 1e3).toFixed(1) + 'K';
+      return neg + String(Math.round(n));
+    }
+    // 默认 wan
+    if (n >= 1e8) return neg + (n / 1e8).toFixed(2) + ' 亿';
+    if (n >= 1e4) return neg + (n / 1e4).toFixed(1) + ' 万';
+    return neg + Number(n).toLocaleString('en-US');
+  }
+
+  /**
+   * 缓存命中率：输入比例（0-1），输出 1 位小数百分比
+   * 分母为 0 / 空值时显示 --
+   */
+  function hitRate(ratio) {
+    if (ratio === null || ratio === undefined || !isFinite(Number(ratio))) return '--';
+    return (Number(ratio) * 100).toFixed(1) + '%';
+  }
+
+  /** 由分子分母计算命中率，分母为 0 时返回 -- */
+  function hitRateOf(cached, req) {
+    if (!req || !isFinite(Number(req)) || Number(req) <= 0) return '--';
+    return hitRate(Number(cached || 0) / Number(req));
+  }
+
+  /** TTFT：<1000ms 显示 xxx ms，>=1s 显示 x.xx s */
+  function latency(ms) {
+    if (ms === null || ms === undefined || !isFinite(Number(ms))) return '--';
+    ms = Number(ms);
+    if (ms < 1000) return Math.round(ms) + ' ms';
+    return (ms / 1000).toFixed(2) + ' s';
+  }
+
+  /**
+   * Credit 用量（估算值）：2 位小数千分位；0 < v < 0.01 显示 <0.01
+   * Credit = 总 Tokens ÷ 1e6 × 模型 Credit 系数
+   */
+  function credit(v) {
+    if (v === null || v === undefined || !isFinite(Number(v))) return '--';
+    v = Number(v);
+    if (v > 0 && v < 0.01) return '<0.01';
+    return v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }
+
+  /** '2026-09-05' -> '09-05'，趋势图横轴用 */
+  function shortDate(iso) {
+    if (!iso || typeof iso !== 'string') return '';
+    var m = iso.match(/^\d{4}-(\d{2}-\d{2})/);
+    return m ? m[1] : iso;
+  }
+
+  /** 秒级时间戳 -> 'HH:MM:SS' */
+  function timeOfDay(epochSec) {
+    if (!epochSec || !isFinite(Number(epochSec))) return '--';
+    var d = new Date(Number(epochSec) * 1000);
+    function p(x) { return (x < 10 ? '0' : '') + x; }
+    return p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds());
+  }
+
+  /** Date -> 'YYYY-MM-DD'，CSV 文件名用 */
+  function todayStr(d) {
+    d = d || new Date();
+    function p(x) { return (x < 10 ? '0' : '') + x; }
+    return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate());
+  }
+
+  /** 秒级时间戳 -> 'HH:00'，分时图横轴用 */
+  function hourLabel(epochSec) {
+    if (!epochSec || !isFinite(Number(epochSec))) return '';
+    var d = new Date(Number(epochSec) * 1000);
+    return (d.getHours() < 10 ? '0' : '') + d.getHours() + ':00';
+  }
+
+  /** 毫秒时间戳 -> 'YYYY-MM-DD HH:MM:SS'（本地时区），会话时间字段用 */
+  function dateTime(ms) {
+    if (ms === null || ms === undefined || !isFinite(Number(ms))) return '--';
+    var d = new Date(Number(ms));
+    function p(x) { return (x < 10 ? '0' : '') + x; }
+    return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) +
+      ' ' + p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds());
+  }
+
+  /**
+   * 环比变化（比值）：当前值与上一周期值比较，返回 { text, dir }
+   * dir: 1 升 / -1 降 / 0 持平；基准为 0 或空值时返回 null（不展示）
+   */
+  function pctChange(cur, prev) {
+    cur = Number(cur); prev = Number(prev);
+    if (!isFinite(cur) || !isFinite(prev) || prev <= 0) return null;
+    var d = (cur - prev) / prev;
+    var dir = d > 0.0005 ? 1 : (d < -0.0005 ? -1 : 0);
+    return { text: (d >= 0 ? '+' : '') + (d * 100).toFixed(1) + '%', dir: dir };
+  }
+
+  /** 比率环比（百分点差）：如命中率 32.1% vs 30.0% -> '+2.1pp' */
+  function ppChange(cur, prev) {
+    cur = Number(cur); prev = Number(prev);
+    if (!isFinite(cur) || !isFinite(prev)) return null;
+    var d = (cur - prev) * 100;
+    var dir = d > 0.05 ? 1 : (d < -0.05 ? -1 : 0);
+    return { text: (d >= 0 ? '+' : '') + d.toFixed(1) + 'pp', dir: dir };
+  }
+
+  /** API Key 脱敏：保留前 11 位与后 2 位，如 api-key-t006••••56 */
+  function maskKey(key) {
+    if (!key) return '';
+    key = String(key);
+    if (key.length <= 6) return key.charAt(0) + '••••';
+    if (key.length <= 13) return key.slice(0, 4) + '••••' + key.slice(-2);
+    return key.slice(0, 11) + '••••' + key.slice(-2);
+  }
+
+  window.BRU = window.BRU || {};
+  window.BRU.format = {
+    fullNumber: fullNumber,
+    abbrev: abbrev,
+    hitRate: hitRate,
+    hitRateOf: hitRateOf,
+    latency: latency,
+    credit: credit,
+    shortDate: shortDate,
+    timeOfDay: timeOfDay,
+    todayStr: todayStr,
+    hourLabel: hourLabel,
+    dateTime: dateTime,
+    pctChange: pctChange,
+    ppChange: ppChange,
+    maskKey: maskKey
+  };
+})();