@fish-under-sea/magpie-neartoken 0.1.8 → 0.2.0

package/README.md

@@ -41,6 +41,16 @@
 
 模型目录读的是站点的 `/api/pricing`（公开、全量），不用 `/v1/models`——那个端点按令牌分组过滤，很多账号拿到的是空列表，magpie 的「重新获取模型」就会报 `no models listed`。这里不碰它。
 
+## 三个视角
+
+页面上方三个标签：
+
+| 标签 | 内容 |
+| --- | --- |
+| 原本界面 | 账户、余额与代金券、消耗看板、分组开关、充值、供应商说明 |
+| 模型广场 | 按站点返回的分组重绘：低价 / 满血 / 图片 / 视频 / 语音 / 向量，每组一枚可点的开关（关掉即从 magpie 的模型列表里移除） |
+| 使用日志 | 这个窗口里每个模型花了多少、用了多少 token、占比多少，可按日 / 周 / 月切 |
+
 ## 页面怎么用
 
 1. 装上包，侧边栏「插件」→「NearToken」。

package/index.mjs

@@ -117,7 +117,7 @@ const hasWord = (id, words) => words.some((w) => id.toLowerCase().includes(w))
  * 「站点原文组名 + 倍率 + 模型」。每行带自己的 x-neartoken-group 头，请求
  * 按那一行走那一组——这就是"模型后面跟着它的分组"。
  */
-async function catalog() {
+async function catalog(disabled = new Set()) {
   const env = await call('/api/pricing')
   const rows = Array.isArray(env?.data) ? env.data : []
   const refs = env?.group_refs && typeof env.group_refs === 'object' ? env.group_refs : {}
@@ -131,7 +131,9 @@ async function catalog() {
     const drawer = hasWord(model, DRAWS) || ends.includes('image-generation')
     const film = hasWord(model, FILMS)
     if (!chat && !drawer && !film) continue
-    const groups = Array.isArray(row?.enable_groups) && row.enable_groups.length ? row.enable_groups : ['']
+    const all = Array.isArray(row?.enable_groups) && row.enable_groups.length ? row.enable_groups : ['']
+    const groups = all.filter((g) => !disabled.has(String(g ?? '').trim()))
+    if (!groups.length) continue
     for (const raw of groups) {
       const group = String(raw ?? '').trim()
       const ref = group && refs[group] ? String(refs[group]) : ''
@@ -157,7 +159,22 @@ async function catalog() {
   return out
 }
 
-export default async function neartoken() {
+export default async function neartoken(input, options) {
+  // 页面写进来的开关：关掉的分组，它们的模型不再出现在 magpie 的列表里。
+  // 走的是 magpie 的 plugin options（页面 magpie.options.set），不碰宿主代码。
+  const disabled = (() => {
+    const raw = options?.disabledGroups
+    if (Array.isArray(raw)) return new Set(raw.filter((g) => typeof g === 'string'))
+    if (typeof raw === 'string' && raw.trim()) {
+      try {
+        const parsed = JSON.parse(raw)
+        return new Set(Array.isArray(parsed) ? parsed.filter((g) => typeof g === 'string') : [])
+      } catch {
+        return new Set()
+      }
+    }
+    return new Set()
+  })()
   return {
     auth: {
       provider: PROVIDER_ID,
@@ -274,7 +291,7 @@ export default async function neartoken() {
        * @returns {Promise<Record<string, object>>}
        */
       async models() {
-        return catalog()
+        return catalog(disabled)
       },
     },
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fish-under-sea/magpie-neartoken",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "NearToken for magpie: a provider whose sign-in is the site's own device authorization, models listed per billing group with their multiplier, balance and vouchers on magpie's usage card, plus a page for spending and top-ups.",
   "type": "module",
   "main": "index.mjs",

package/page/app.js

@@ -18,6 +18,11 @@
   const windows = new Map()
   /** 充值面：档位、渠道、当前选择。 */
   let topupInfo = null
+  /** 插件自己的开关：关掉的分组（写进 magpie 的 plugin options，provider 插件按它过滤）。 */
+  let options = {}
+  let disabledGroups = new Set()
+  /** 当前视角：home / market / logs。 */
+  let tab = 'home'
   const pick = { amount: null, method: null, custom: '' }
   /** 正在等宿主的哪个动作。 */
   let pendingAct = ''
@@ -92,12 +97,22 @@
   // ---------- 主流程 ----------
 
   async function boot() {
+    // 预览用：?tab=market 可直接落在某个视角，生产里没这个参数就是原本界面
+    const want = new URLSearchParams(location.search).get('tab')
+    if (want === 'market' || want === 'logs' || want === 'home') tab = want
     if (!bridge || typeof bridge.call !== 'function') {
       fail('这个 magpie 还没有插件页的调用通道。')
       return
     }
     try {
       await bridge.ready
+      // 插件自己的开关（关掉的分组）：写在这里，provider 插件按它过滤模型
+      try {
+        options = (await bridge.options.get()) || {}
+      } catch {
+        options = {}
+      }
+      disabledGroups = new Set(Array.isArray(options.disabledGroups) ? options.disabledGroups : [])
       await load()
       clock = setInterval(tick, 1000)
       bridge.onVisibility((visible) => {
@@ -161,7 +176,10 @@
       frag.append(pendingCard())
     } else if (view.configured) {
       setStatus('已连接', 'on')
-      frag.append(accountCard(), boardCard(), topupCard(), providerCard())
+      frag.append(tabsBar())
+      if (tab === 'market') frag.append(marketCard())
+      else if (tab === 'logs') frag.append(logsCard())
+      else frag.append(accountCard(), boardCard(), groupsCard(), topupCard(), providerCard())
     } else {
       setStatus('未连接')
       frag.append(connectCard())
@@ -173,6 +191,25 @@
     if (view.pending) paintCountdown()
   }
 
+  /** tabsBar 是三个视角：原本界面、模型广场、使用日志。 */
+  function tabsBar() {
+    const tabs = [['home', '原本界面'], ['market', '模型广场'], ['logs', '使用日志']]
+    return el('div', { class: 'tabs', role: 'tablist' },
+      tabs.map(([key, label]) => el('button', {
+        role: 'tab',
+        'aria-selected': String(tab === key),
+        class: tab === key ? 'on' : '',
+        onclick: () => {
+          if (tab === key) return
+          tab = key
+          render()
+          if (key !== 'home' && view.configured && !windows.has(span)) {
+            call('neartoken:usage', { range: span }).then((w) => { windows.set(span, w); render() }).catch(showError)
+          }
+        },
+      }, label)))
+  }
+
   /** 未连接：说清会发生什么，再给一个按钮。 */
   function connectCard() {
     return card('连接中转站',
@@ -330,6 +367,156 @@
     return card('充值', ...parts)
   }
 
+  /** 分组落在哪一类：低价 / 满血 / 图片 / 视频 / 语音 / 向量 / 其他。 */
+  function bucketOf(name) {
+    const n = String(name || '')
+    if (/生图|图片|image|画/i.test(n)) return '图片'
+    if (/视频|video/i.test(n)) return '视频'
+    if (/语音|tts|asr|转写|whisper|speech/i.test(n)) return '语音'
+    if (/向量|embedding/i.test(n)) return '向量'
+    if (/低价/.test(n)) return '低价'
+    if (/满血|官key|pro/i.test(n)) return '满血'
+    return '其他'
+  }
+  const BUCKET_ORDER = ['低价', '满血', '图片', '视频', '语音', '向量', '其他']
+
+  /** 模型广场：按站点返回的分组重绘，分组即为开关。 */
+  function marketCard() {
+    const list = Array.isArray(view.groupList) ? view.groupList : null
+    const head = el('div', { class: 'row' },
+      el('h2', { class: 'grow', text: '分组', style: 'margin:0' }),
+      el('a', { class: 'link', href: 'https://neartoken.cc/pricing', target: '_blank', rel: 'noreferrer' }, '站点广场 ↗'))
+    if (!list || !list.length) {
+      return card(null, head,
+        el('p', { class: 'note' },
+          '宿主还没把分组明细交给页面（`neartoken:state` 目前只回分组数）。'),
+        el('p', { class: 'note' },
+          '开关已接好：写进 magpie 的 plugin options，provider 插件按它过滤模型表；',
+          '宿主一回 groupList，这里就按站点分组重绘。先去 ',
+          el('a', { class: 'link', href: 'https://neartoken.cc/pricing', target: '_blank', rel: 'noreferrer' }, '站点广场'),
+          ' 看分组与倍率。'))
+    }
+    const buckets = new Map()
+    for (const g of list) {
+      const key = bucketOf(g?.name)
+      if (!buckets.has(key)) buckets.set(key, [])
+      buckets.get(key).push(g)
+    }
+    const parts = [head]
+    for (const key of BUCKET_ORDER) {
+      const groups = buckets.get(key)
+      if (!groups || !groups.length) continue
+      const chips = groups.map((g) => groupChip(g))
+      parts.push(el('div', { class: 'bucket' },
+        el('div', { class: 'bucket-name' }, key, el('span', { class: 'n', text: String(groups.length) })),
+        el('div', { class: 'groups' }, chips)))
+    }
+    const off = disabledGroups.size
+    parts.push(el('p', { class: 'note', text: off
+      ? '已关掉 ' + off + ' 个分组：它们的模型不再出现在 magpie 的模型列表里。'
+      : '全部开着。点一下关掉一组，它的模型就不再出现在 magpie 的模型列表里。' }))
+    return card(null, ...parts)
+  }
+
+  /** groupChip 是一枚分组开关：站点原文组名 + 倍率 + 模型数。 */
+  function groupChip(g) {
+    const name = String(g?.name ?? '')
+    const on = !disabledGroups.has(name)
+    const ratio = Number(g?.ratio) || 0
+    const label = ratio > 0 ? name + ' ' + ratioText(ratio) + 'x' : name
+    return el('button', {
+      class: 'group-chip',
+      'aria-pressed': String(on),
+      title: g?.models ? g.models + ' 个模型' : '',
+      onclick: () => toggleGroup(name),
+    }, label, el('span', { class: 'n', text: String(g?.models || 0) }))
+  }
+
+  /** 使用日志：这个窗口里每个模型花了多少、用了多少 token。 */
+  function logsCard() {
+    const data = windows.get(span)
+    const seg = el('div', { class: 'seg' },
+      ['day', 'week', 'month'].map((key) =>
+        el('button', { 'aria-pressed': String(span === key), onclick: () => switchSpan(key) },
+          key === 'day' ? '日' : key === 'week' ? '周' : '月')))
+    const head = el('div', { class: 'row' },
+      el('h2', { class: 'grow', text: '使用日志', style: 'margin:0' }), seg)
+    if (!data) return card(null, head, el('p', { class: 'note', text: '正在读取用量…' }))
+    if (!data.available) {
+      return card(null, head, el('p', { class: 'note warn', text: data.reason === 'unreachable'
+        ? '暂时读不到站点的用量数据。' : '站点未提供用量统计。' }))
+    }
+    const rows = (data.models || []).slice().sort((a, b) => b.tokens - a.tokens)
+    const total = rows.reduce((sum, m) => sum + m.tokens, 0) || 1
+    const table = el('div', { class: 'log-table' },
+      el('div', { class: 'log-row head' },
+        el('span', { text: '模型' }), el('span', { text: 'Token' }), el('span', { text: '花费' }), el('span', { text: '占比' })),
+      rows.map((m) => el('div', { class: 'log-row' },
+        el('span', { class: 'who', title: m.model, text: m.model }),
+        el('span', { class: 'num', text: compact(m.tokens) }),
+        el('span', { class: 'num', text: m.costText || '' }),
+        el('span', { class: 'num', text: Math.round((m.tokens / total) * 100) + '%' }))))
+    return card(null, head,
+      el('div', { class: 'stats' },
+        el('div', { class: 'stat' }, el('div', { class: 'k', text: '消耗' }), el('div', { class: 'v', text: data.spent })),
+        el('div', { class: 'stat' }, el('div', { class: 'k', text: '当前余额' }), el('div', { class: 'v', text: data.balance || '—' })),
+        el('div', { class: 'stat' }, el('div', { class: 'k', text: 'Token' }), el('div', { class: 'v', text: compact(data.tokens) }))),
+      table,
+      el('p', { class: 'note', text: '数字来自站点用量端点；这个窗口里没有调用就不列模型。' }))
+  }
+  /** 分组墙：站点原文组名 + 倍率 + 模型数，点一下启停（写进插件 options）。 */
+  function groupsCard() {
+    const list = Array.isArray(view.groupList) ? view.groupList : null
+    const head = el('div', { class: 'row' },
+      el('h2', { class: 'grow', text: '分组', style: 'margin:0' }),
+      el('a', { class: 'link', href: 'https://neartoken.cc/pricing', target: '_blank', rel: 'noreferrer' }, '站点广场 ↗'))
+    if (!list || !list.length) {
+      return card(null, head,
+        el('p', { class: 'note' },
+          '宿主还没把分组明细交给页面。开关已经接好（写进 magpie 的 plugin options，provider 插件按它滤模型），',
+          '宿主一回 groupList，这里就是一墙可点的分组。先去 ',
+          el('a', { class: 'link', href: 'https://neartoken.cc/pricing', target: '_blank', rel: 'noreferrer' }, '站点广场'),
+          ' 看分组与倍率。'))
+    }
+    const chips = list.map((g) => {
+      const name = String(g?.name ?? '')
+      const on = !disabledGroups.has(name)
+      const ratio = Number(g?.ratio) || 0
+      const label = ratio > 0 ? name + ' ' + ratioText(ratio) + 'x' : name
+      return el('button', {
+        class: 'group-chip',
+        'aria-pressed': String(on),
+        title: g?.models ? g.models + ' 个模型' : '',
+        onclick: () => toggleGroup(name),
+      }, label, el('span', { class: 'n', text: String(g?.models || 0) }))
+    })
+    const off = disabledGroups.size
+    return card(null, head,
+      el('div', { class: 'groups' }, chips),
+      el('p', { class: 'note', text: off
+        ? '已关掉 ' + off + ' 个分组：它们的模型不再出现在 magpie 的模型列表里。'
+        : '全部开着。点一下关掉一组，它的模型就不再出现在 magpie 的模型列表里。' }))
+  }
+
+  /** toggleGroup 翻转一个分组，并写回插件 options（provider 插件按它过滤）。 */
+  async function toggleGroup(name) {
+    if (!name) return
+    if (disabledGroups.has(name)) disabledGroups.delete(name)
+    else disabledGroups.add(name)
+    render()
+    try {
+      const next = await bridge.options.set({ ...options, disabledGroups: [...disabledGroups] })
+      if (next && typeof next === 'object') options = next
+    } catch (error) {
+      showError(error)
+    }
+  }
+
+  /** ratioText 是倍率的写法：0.1 → 0.1，1 → 1。 */
+  function ratioText(v) {
+    return String(Math.round(v * 10000) / 10000)
+  }
+
   /** 供应商卡：说明模型已经交给 magpie 了。 */
   function providerCard() {
     const models = view.models || 0

package/page/style.css

@@ -382,4 +382,69 @@ select {
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
-}
+}
+/* 分组墙：像模型广场那样成片的组名与倍率 */
+.groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
+
+.group-chip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 7px;
+  height: 30px;
+  padding: 0 11px;
+  border-radius: 999px;
+  border: 1px solid var(--nt-line);
+  background: transparent;
+  color: var(--nt-muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.group-chip[aria-pressed="true"] {
+  color: var(--nt-ink);
+  border-color: var(--nt-accent);
+  background: var(--nt-accent-soft);
+}
+
+.group-chip .n {
+  font-family: var(--nt-code);
+  font-size: 10.5px;
+  color: var(--nt-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+.group-chip[aria-pressed="true"] .n { color: var(--nt-muted); }
+
+.link { color: var(--nt-accent); text-decoration: none; font-size: 11.5px; }
+.link:hover { text-decoration: underline; }
+/* 三个视角：原本界面 / 模型广场 / 使用日志 */
+.tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 14px 0 0; border: 1px solid var(--nt-line); border-radius: 10px; }
+
+.tabs button {
+  border: 0; height: 26px; padding: 0 12px; border-radius: 8px;
+  color: var(--nt-muted); background: transparent; font-size: 12px;
+}
+
+.tabs button.on { color: var(--nt-ink); background: var(--nt-accent-soft); box-shadow: inset 0 0 0 1px var(--nt-accent); }
+
+/* 模型广场：一类一组，组名在上，开关在下 */
+.bucket { margin: 14px 0 0; }
+.bucket-name { display: flex; align-items: baseline; gap: 7px; font-size: 11.5px; color: var(--nt-muted); margin-bottom: 8px; }
+.bucket-name .n { font-family: var(--nt-code); font-size: 10.5px; color: var(--nt-faint); }
+
+/* 使用日志 */
+.log-table { margin-top: 12px; border-top: 1px solid var(--nt-line); }
+
+.log-row {
+  display: grid;
+  grid-template-columns: 1fr 84px 92px 56px;
+  gap: 8px;
+  padding: 7px 0;
+  border-bottom: 1px solid var(--nt-line);
+  font-size: 12px;
+  align-items: baseline;
+}
+
+.log-row.head { color: var(--nt-muted); font-size: 11px; border-bottom-color: transparent; }
+.log-row .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.log-row .num { text-align: right; font-family: var(--nt-code); font-variant-numeric: tabular-nums; color: var(--nt-muted); }