dsh-token-gauge 0.1.0

package/src/host.ts

@@ -0,0 +1,339 @@
+// ============================================================================
+// DSH Host 半边：Token 用量监听、累计、计费与持久化
+// 运行环境：Node（宿主进程）。只做数据，不直接触碰 DOM。
+// 与 Client 半边通过 DSH 内部事件总线通信：
+//   Host -> Client : ctx.events.emit('token-gauge:state', state)
+//   Client -> Host : ctx.events.emit('token-gauge:cmd',  { type, payload })
+// ============================================================================
+import type { Context } from '@deepseek-ai/cordis'
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+
+const PLUGIN_ID = 'dsh-token-gauge'
+const DATA_DIR = join(homedir(), '.dsh-token-gauge')
+const STATE_FILE = join(DATA_DIR, 'state.json')
+
+// ---- 类型定义 --------------------------------------------------------------
+interface Pricing {
+  inputHit: number // 缓存命中输入（¥/百万 token）
+  inputMiss: number // 缓存未命中输入
+  output: number // 输出
+  cacheWrite: number // 缓存写入
+}
+
+interface Buckets {
+  input: number // 未命中缓存的输入 token
+  cacheRead: number // 缓存命中输入 token
+  cacheWrite: number // 缓存写入 token
+  output: number // 输出 token
+}
+
+interface Entry extends Buckets {
+  cost: number
+  calls: number
+}
+
+type Metric = 'global' | 'session' | 'today' | 'daily' | 'weekly' | 'monthly'
+
+interface DisplayFlags {
+  usage: boolean
+  cost: boolean
+  io: boolean
+  cacheMiss: boolean
+}
+
+interface Limits {
+  global: number | null
+  daily: number | null
+  weekly: number | null
+  monthly: number | null
+}
+
+interface Settings {
+  style: string
+  palette: string
+  lang: 'zh' | 'en'
+  metric: Metric
+  display: DisplayFlags
+  limits: Limits
+  pricing: Record<string, Pricing>
+}
+
+interface State {
+  global: Entry
+  daily: Record<string, Entry>
+  weekly: Record<string, Entry>
+  monthly: Record<string, Entry>
+  sessions: Record<string, Entry>
+  models: Record<string, Entry>
+  activeSession: string
+  settings: Settings
+}
+
+// ---- DeepSeek 官方 CNY 定价预设（¥/百万 token），可被设置覆盖 -----------------
+const DEFAULT_PRICING: Record<string, Pricing> = {
+  'deepseek-chat': { inputHit: 0.5, inputMiss: 2, output: 8, cacheWrite: 2 },
+  'deepseek-v3': { inputHit: 0.5, inputMiss: 2, output: 8, cacheWrite: 2 },
+  'deepseek-reasoner': { inputHit: 1, inputMiss: 4, output: 16, cacheWrite: 4 },
+  'deepseek-r1': { inputHit: 1, inputMiss: 4, output: 16, cacheWrite: 4 },
+  'deepseek-v4-flash': { inputHit: 0.5, inputMiss: 2, output: 2, cacheWrite: 2 },
+  'deepseek-v4-pro': { inputHit: 1, inputMiss: 4, output: 8, cacheWrite: 4 },
+  'deepseek-coder': { inputHit: 0.5, inputMiss: 2, output: 8, cacheWrite: 2 },
+  __default__: { inputHit: 0.5, inputMiss: 2, output: 8, cacheWrite: 2 },
+}
+
+// ---- 工具函数 --------------------------------------------------------------
+function emptyEntry(): Entry {
+  return { input: 0, cacheRead: 0, cacheWrite: 0, output: 0, cost: 0, calls: 0 }
+}
+
+function addEntry(t: Entry, s: Entry): void {
+  t.input += s.input
+  t.cacheRead += s.cacheRead
+  t.cacheWrite += s.cacheWrite
+  t.output += s.output
+  t.cost += s.cost
+  t.calls += s.calls
+}
+
+function totalTokens(e: Buckets): number {
+  return e.input + e.cacheRead + e.cacheWrite + e.output
+}
+
+function mergedPricing(settings: Settings): Record<string, Pricing> {
+  return { ...DEFAULT_PRICING, ...(settings.pricing || {}) }
+}
+
+function costFor(modelKey: string, b: Buckets, pricing: Record<string, Pricing>): number {
+  const p = pricing[modelKey] || pricing['__default__'] || DEFAULT_PRICING['__default__']
+  return (
+    (b.input * p.inputMiss +
+      b.cacheRead * p.inputHit +
+      b.cacheWrite * p.cacheWrite +
+      b.output * p.output) /
+    1_000_000
+  )
+}
+
+function todayKey(d = new Date()): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function monthKey(d = new Date()): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+}
+
+function weekKey(d = new Date()): string {
+  // ISO 周序号
+  const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))
+  const dayNum = (date.getUTCDay() + 6) % 7
+  date.setUTCDate(date.getUTCDate() - dayNum + 3)
+  const firstThursday = new Date(Date.UTC(date.getUTCFullYear(), 0, 4))
+  const week =
+    1 +
+    Math.round(
+      ((date.getTime() - firstThursday.getTime()) / 86400000 - 3 + ((firstThursday.getUTCDay() + 6) % 7)) / 7,
+    )
+  return `${d.getFullYear()}-W${String(week).padStart(2, '0')}`
+}
+
+function defaultSettings(): Settings {
+  return {
+    style: 'ev', // 默认风格：现代电车科技
+    palette: 'neon', // 默认配色：霓虹蓝
+    lang: 'zh',
+    metric: 'global',
+    display: {
+      usage: true,
+      cost: true,
+      io: true,
+      cacheMiss: true,
+    },
+    limits: { global: null, daily: null, weekly: null, monthly: null },
+    pricing: {},
+  }
+}
+
+function defaultState(): State {
+  return {
+    global: emptyEntry(),
+    daily: {},
+    weekly: {},
+    monthly: {},
+    sessions: {},
+    models: {},
+    activeSession: '',
+    settings: defaultSettings(),
+  }
+}
+
+function loadState(): State {
+  try {
+    if (existsSync(STATE_FILE)) {
+      const raw = JSON.parse(readFileSync(STATE_FILE, 'utf8')) as Partial<State>
+      const base = defaultState()
+      const merged: State = {
+        ...base,
+        ...raw,
+        settings: { ...base.settings, ...(raw.settings || {}) },
+      }
+      // 补全嵌套字段，避免旧版本缺字段
+      merged.settings.display = { ...base.settings.display, ...(raw.settings?.display || {}) }
+      merged.settings.limits = { ...base.settings.limits, ...(raw.settings?.limits || {}) }
+      merged.settings.pricing = raw.settings?.pricing || {}
+      merged.daily = raw.daily || {}
+      merged.weekly = raw.weekly || {}
+      merged.monthly = raw.monthly || {}
+      merged.sessions = raw.sessions || {}
+      merged.models = raw.models || {}
+      merged.global = { ...emptyEntry(), ...(raw.global || {}) }
+      return merged
+    }
+  } catch (e) {
+    console.warn(`[${PLUGIN_ID}] load state failed, use default:`, e)
+  }
+  return defaultState()
+}
+
+function saveState(state: State): void {
+  try {
+    mkdirSync(DATA_DIR, { recursive: true })
+    writeFileSync(STATE_FILE, JSON.stringify(state))
+  } catch (e) {
+    console.warn(`[${PLUGIN_ID}] save state failed:`, e)
+  }
+}
+
+// 从事件载荷中尽量稳妥地抽取用量桶 + 元数据
+function extractUsage(data: any): { buckets: Buckets; model: string; session: string; id?: string } | null {
+  if (!data) return null
+  const u = data.usage ?? data
+  const input =
+    u.input_tokens ?? u.prompt_tokens ?? u.uncachedInput ?? u.input ?? u.total_input_tokens ?? 0
+  const cacheRead =
+    u.cache_read_tokens ?? u.cacheRead ?? u.prompt_cache_hit_tokens ?? u.cache_read ?? 0
+  const cacheWrite = u.cache_write_tokens ?? u.cacheWrite ?? u.cache_write ?? 0
+  const output =
+    u.output_tokens ?? u.completion_tokens ?? u.output ?? u.total_output_tokens ?? 0
+  if (!input && !cacheRead && !cacheWrite && !output) return null
+  const model: string = data.model ?? u.model ?? 'unknown'
+  const session: string = data.session ?? u.session ?? data.sessionId ?? u.sessionId ?? ''
+  const id: string | undefined = data.id ?? u.id ?? data.seq ?? u.seq
+  return {
+    buckets: { input: Number(input) || 0, cacheRead: Number(cacheRead) || 0, cacheWrite: Number(cacheWrite) || 0, output: Number(output) || 0 },
+    model,
+    session,
+    id,
+  }
+}
+
+// ---- 插件入口 --------------------------------------------------------------
+export const name = PLUGIN_ID
+export const inject = ['events']
+export function apply(ctx: Context): void {
+  const state = loadState()
+  let saveTimer: NodeJS.Timeout | null = null
+
+  const scheduleSave = (): void => {
+    if (saveTimer) return
+    saveTimer = setTimeout(() => {
+      saveTimer = null
+      saveState(state)
+    }, 400)
+  }
+
+  const pushState = (): void => {
+    ctx.events.emit(`${PLUGIN_ID}:state`, state)
+  }
+
+  // 累计一次用量
+  const countedIds = new Set<string>()
+  const accumulate = (data: any): void => {
+    const ex = extractUsage(data)
+    if (!ex) return
+    if (ex.id) {
+      if (countedIds.has(ex.id)) return
+      countedIds.add(ex.id)
+    }
+    const modelKey = ex.model || 'unknown'
+    if (ex.session) state.activeSession = ex.session
+    const pricing = mergedPricing(state.settings)
+    const cost = costFor(modelKey, ex.buckets, pricing)
+    const e: Entry = { ...ex.buckets, cost, calls: 1 }
+
+    addEntry(state.global, e)
+    const dk = todayKey()
+    state.daily[dk] = state.daily[dk] || emptyEntry()
+    addEntry(state.daily[dk], e)
+    const wk = weekKey()
+    state.weekly[wk] = state.weekly[wk] || emptyEntry()
+    addEntry(state.weekly[wk], e)
+    const mk = monthKey()
+    state.monthly[mk] = state.monthly[mk] || emptyEntry()
+    addEntry(state.monthly[mk], e)
+    if (ex.session) {
+      state.sessions[ex.session] = state.sessions[ex.session] || emptyEntry()
+      addEntry(state.sessions[ex.session], e)
+    }
+    state.models[modelKey] = state.models[modelKey] || emptyEntry()
+    addEntry(state.models[modelKey], e)
+
+    scheduleSave()
+    pushState()
+  }
+
+  // 监听用量事件（兼容多种事件名/字段形态）
+  ctx.effect(() => {
+    const onUsage = (data: any) => accumulate(data)
+    ctx.events.on('assistant/message.usage', onUsage)
+    ctx.events.on('usage', onUsage)
+    ctx.events.on('assistant/message', (data: any) => {
+      if (data && (data.usage || (data.data && data.data.usage))) onUsage(data)
+    })
+    return () => {
+      ctx.events.off('assistant/message.usage', onUsage)
+      ctx.events.off('usage', onUsage)
+    }
+  })
+
+  // 响应 Client 指令
+  ctx.effect(() => {
+    const onCmd = (msg: { type: string; payload?: any }) => {
+      if (!msg || typeof msg.type !== 'string') return
+      switch (msg.type) {
+        case 'getState':
+          pushState()
+          break
+        case 'setSettings':
+          state.settings = { ...state.settings, ...(msg.payload || {}) }
+          scheduleSave()
+          pushState()
+          break
+        case 'resetSettings':
+          state.settings = defaultSettings()
+          scheduleSave()
+          pushState()
+          break
+        case 'clearUsage':
+          state.global = emptyEntry()
+          state.daily = {}
+          state.weekly = {}
+          state.monthly = {}
+          state.sessions = {}
+          state.models = {}
+          countedIds.clear()
+          scheduleSave()
+          pushState()
+          break
+        default:
+          break
+      }
+    }
+    ctx.events.on(`${PLUGIN_ID}:cmd`, onCmd)
+    return () => ctx.events.off(`${PLUGIN_ID}:cmd`, onCmd)
+  })
+
+  // 初始推送
+  pushState()
+}

package/src/i18n.ts

@@ -0,0 +1,59 @@
+// 中英文文案
+type Dict = Record<string, { zh: string; en: string }>
+
+const I18N: Dict = {
+  title: { zh: 'Token 仪表盘', en: 'Token Gauge' },
+  settings: { zh: '设置', en: 'Settings' },
+  style: { zh: '风格', en: 'Style' },
+  palette: { zh: '配色', en: 'Palette' },
+  display: { zh: '显示内容', en: 'Display' },
+  metric: { zh: '用量口径', en: 'Metric' },
+  limit: { zh: '限额', en: 'Limit' },
+  limitGlobal: { zh: '全局限额', en: 'Global limit' },
+  limitDaily: { zh: '日限额', en: 'Daily limit' },
+  limitWeekly: { zh: '周限额', en: 'Weekly limit' },
+  limitMonthly: { zh: '月限额', en: 'Monthly limit' },
+  usage: { zh: '用量', en: 'Usage' },
+  cost: { zh: '费用', en: 'Cost' },
+  input: { zh: '输入', en: 'Input' },
+  output: { zh: '输出', en: 'Output' },
+  cacheMiss: { zh: '缓存未命中', en: 'Cache miss' },
+  lang: { zh: '语言', en: 'Language' },
+  export: { zh: '导出报表', en: 'Export report' },
+  exportCsv: { zh: 'CSV', en: 'CSV' },
+  exportJson: { zh: 'JSON', en: 'JSON' },
+  close: { zh: '关闭', en: 'Close' },
+  save: { zh: '保存', en: 'Save' },
+  reset: { zh: '恢复默认', en: 'Reset' },
+  clear: { zh: '清空用量', en: 'Clear usage' },
+  advanced: { zh: '高级·定价(¥/百万token)', en: 'Advanced · Pricing (¥/M tokens)' },
+  overLimit: { zh: '已超出限额！', en: 'Over limit!' },
+  noData: { zh: '暂无用量数据，开始对话后此处会实时更新。', en: 'No usage yet. Start a chat to see live updates.' },
+  autoScale: { zh: '自动量程', en: 'auto' },
+  metricGlobal: { zh: '全局累计', en: 'Global' },
+  metricSession: { zh: '当前会话', en: 'Session' },
+  metricToday: { zh: '今日', en: 'Today' },
+  metricDaily: { zh: '每日', en: 'Daily' },
+  metricWeekly: { zh: '每周', en: 'Weekly' },
+  metricMonthly: { zh: '每月', en: 'Monthly' },
+  inputTokens: { zh: '输入 Token', en: 'Input tokens' },
+  outputTokens: { zh: '输出 Token', en: 'Output tokens' },
+  cacheHit: { zh: '缓存命中', en: 'Cache hit' },
+  cacheWrite: { zh: '缓存写入', en: 'Cache write' },
+  model: { zh: '模型', en: 'Model' },
+  period: { zh: '周期', en: 'Period' },
+  totalCost: { zh: '总费用', en: 'Total cost' },
+  totalTokens: { zh: '总 Token', en: 'Total tokens' },
+  calls: { zh: '调用次数', en: 'Calls' },
+  hintLimit: { zh: '留空表示不限（仪表盘自动量程）。', en: 'Leave empty for no limit (auto scale).' },
+}
+
+export function t(lang: 'zh' | 'en', key: string): string {
+  const e = I18N[key]
+  if (!e) return key
+  return e[lang] ?? e.zh
+}
+
+export function metricLabel(lang: 'zh' | 'en', metric: string): string {
+  return t(lang, 'metric' + metric.charAt(0).toUpperCase() + metric.slice(1))
+}

package/src/settings.ts

@@ -0,0 +1,270 @@
+// 侧边栏内设置弹窗：风格 / 配色 / 显示内容 / 用量口径 / 限额 / 定价 / 语言 / 导出
+import { STYLES, PALETTES } from './styles'
+import { t, metricLabel } from './i18n'
+
+type Lang = 'zh' | 'en'
+interface DisplayFlags {
+  usage: boolean
+  cost: boolean
+  io: boolean
+  cacheMiss: boolean
+}
+interface Settings {
+  style: string
+  palette: string
+  lang: Lang
+  metric: string
+  display: DisplayFlags
+  limits: { global: number | null; daily: number | null; weekly: number | null; monthly: number | null }
+  pricing: Record<string, any>
+}
+interface State {
+  settings: Settings
+}
+
+export interface SettingsModalOpts {
+  onSettings: (patch: Partial<Settings>) => void
+  onExport: (format: 'csv' | 'json') => void
+  onClear: () => void
+  onReset: () => void
+  getLang: () => Lang
+}
+
+export interface SettingsModal {
+  el: HTMLElement
+  open: (state: State) => void
+  close: () => void
+  sync: (state: State) => void
+}
+
+function chip(label: string, on: boolean, onClick: () => void): HTMLElement {
+  const c = document.createElement('div')
+  c.className = 'tg-chip' + (on ? ' on' : '')
+  c.textContent = label
+  c.addEventListener('click', onClick)
+  return c
+}
+
+export function createSettingsModal(opts: SettingsModalOpts): SettingsModal {
+  const mask = document.createElement('div')
+  mask.className = 'tg-modal-mask'
+  mask.style.display = 'none'
+  const box = document.createElement('div')
+  box.className = 'tg-modal'
+  mask.appendChild(box)
+
+  let openState: State | null = null
+  let isOpen = false
+
+  const render = (state: State) => {
+    const lang = opts.getLang()
+    const s = state.settings
+    box.innerHTML = ''
+    const title = document.createElement('h3')
+    title.textContent = t(lang, 'settings')
+    box.appendChild(title)
+
+    // 语言
+    const langField = document.createElement('div')
+    langField.className = 'tg-field'
+    langField.innerHTML = `<label>${t(lang, 'lang')}</label>`
+    const langRow = document.createElement('div')
+    langRow.className = 'tg-row'
+    langRow.append(
+      chip('中文', s.lang === 'zh', () => opts.onSettings({ lang: 'zh' })),
+      chip('English', s.lang === 'en', () => opts.onSettings({ lang: 'en' })),
+    )
+    langField.appendChild(langRow)
+    box.appendChild(langField)
+
+    // 风格
+    const styleField = document.createElement('div')
+    styleField.className = 'tg-field'
+    styleField.innerHTML = `<label>${t(lang, 'style')}</label>`
+    const styleRow = document.createElement('div')
+    styleRow.className = 'tg-row'
+    for (const st of STYLES) {
+      styleRow.appendChild(
+        chip(lang === 'zh' ? st.labelZh : st.labelEn, s.style === st.id, () => opts.onSettings({ style: st.id })),
+      )
+    }
+    styleField.appendChild(styleRow)
+    box.appendChild(styleField)
+
+    // 配色
+    const palField = document.createElement('div')
+    palField.className = 'tg-field'
+    palField.innerHTML = `<label>${t(lang, 'palette')}</label>`
+    const palRow = document.createElement('div')
+    palRow.className = 'tg-row'
+    for (const p of PALETTES) {
+      palRow.appendChild(
+        chip(lang === 'zh' ? p.labelZh : p.labelEn, s.palette === p.id, () => opts.onSettings({ palette: p.id })),
+      )
+    }
+    palField.appendChild(palRow)
+    box.appendChild(palField)
+
+    // 用量口径
+    const metricField = document.createElement('div')
+    metricField.className = 'tg-field'
+    metricField.innerHTML = `<label>${t(lang, 'metric')}</label>`
+    const metricRow = document.createElement('div')
+    metricRow.className = 'tg-row'
+    for (const m of ['global', 'session', 'today', 'daily', 'weekly', 'monthly']) {
+      metricRow.appendChild(chip(metricLabel(lang, m), s.metric === m, () => opts.onSettings({ metric: m })))
+    }
+    metricField.appendChild(metricRow)
+    box.appendChild(metricField)
+
+    // 显示内容
+    const dispField = document.createElement('div')
+    dispField.className = 'tg-field'
+    dispField.innerHTML = `<label>${t(lang, 'display')}</label>`
+    const dispKeys: { key: keyof DisplayFlags; label: string }[] = [
+      { key: 'usage', label: t(lang, 'usage') },
+      { key: 'cost', label: t(lang, 'cost') },
+      { key: 'io', label: t(lang, 'input') + '/' + t(lang, 'output') },
+      { key: 'cacheMiss', label: t(lang, 'cacheMiss') },
+    ]
+    for (const d of dispKeys) {
+      const row = document.createElement('label')
+      row.className = 'tg-toggle'
+      const cb = document.createElement('input')
+      cb.type = 'checkbox'
+      cb.checked = !!s.display[d.key]
+      cb.addEventListener('change', () => {
+        const next = { ...s.display, [d.key]: cb.checked }
+        opts.onSettings({ display: next })
+      })
+      row.append(cb, document.createTextNode(d.label))
+      dispField.appendChild(row)
+    }
+    box.appendChild(dispField)
+
+    // 限额
+    const limitField = document.createElement('div')
+    limitField.className = 'tg-field'
+    limitField.innerHTML = `<label>${t(lang, 'limit')}</label>`
+    const limitDefs: { key: keyof Settings['limits']; label: string }[] = [
+      { key: 'global', label: t(lang, 'limitGlobal') },
+      { key: 'daily', label: t(lang, 'limitDaily') },
+      { key: 'weekly', label: t(lang, 'limitWeekly') },
+      { key: 'monthly', label: t(lang, 'limitMonthly') },
+    ]
+    for (const ld of limitDefs) {
+      const wrap = document.createElement('div')
+      const lab = document.createElement('label')
+      lab.className = 'tg-toggle'
+      lab.textContent = ld.label
+      const inp = document.createElement('input')
+      inp.className = 'tg-input'
+      inp.type = 'number'
+      inp.min = '0'
+      inp.placeholder = '∞'
+      inp.value = s.limits[ld.key] == null ? '' : String(s.limits[ld.key])
+      inp.addEventListener('change', () => {
+        const v = inp.value.trim()
+        const val = v === '' ? null : Math.max(0, Number(v))
+        if (v !== '' && Number.isNaN(Number(v))) return
+        opts.onSettings({ limits: { ...s.limits, [ld.key]: val } })
+      })
+      wrap.append(lab, inp)
+      limitField.appendChild(wrap)
+    }
+    const hint = document.createElement('div')
+    hint.className = 'tg-hint'
+    hint.textContent = t(lang, 'hintLimit')
+    limitField.appendChild(hint)
+    box.appendChild(limitField)
+
+    // 高级定价
+    const advField = document.createElement('div')
+    advField.className = 'tg-field'
+    advField.innerHTML = `<label>${t(lang, 'advanced')}</label>`
+    const ta = document.createElement('textarea')
+    ta.className = 'tg-input'
+    ta.rows = 5
+    ta.style.fontFamily = 'monospace'
+    ta.value = JSON.stringify(s.pricing || {}, null, 2)
+    advField.appendChild(ta)
+    const advErr = document.createElement('div')
+    advErr.className = 'tg-hint'
+    advErr.style.color = 'var(--c-danger)'
+    const savePrice = document.createElement('button')
+    savePrice.className = 'tg-btn ghost'
+    savePrice.style.marginTop = '6px'
+    savePrice.textContent = t(lang, 'save')
+    savePrice.addEventListener('click', () => {
+      try {
+        const parsed = JSON.parse(ta.value || '{}')
+        opts.onSettings({ pricing: parsed })
+        advErr.textContent = ''
+      } catch (e) {
+        advErr.textContent = String(e)
+      }
+    })
+    advField.append(savePrice, advErr)
+    box.appendChild(advField)
+
+    // 导出
+    const expField = document.createElement('div')
+    expField.className = 'tg-field'
+    expField.innerHTML = `<label>${t(lang, 'export')}</label>`
+    const expRow = document.createElement('div')
+    expRow.className = 'tg-actions'
+    const csvBtn = document.createElement('button')
+    csvBtn.className = 'tg-btn ghost'
+    csvBtn.textContent = 'CSV'
+    csvBtn.addEventListener('click', () => opts.onExport('csv'))
+    const jsonBtn = document.createElement('button')
+    jsonBtn.className = 'tg-btn ghost'
+    jsonBtn.textContent = 'JSON'
+    jsonBtn.addEventListener('click', () => opts.onExport('json'))
+    expRow.append(csvBtn, jsonBtn)
+    expField.appendChild(expRow)
+    box.appendChild(expField)
+
+    // 操作
+    const act = document.createElement('div')
+    act.className = 'tg-actions'
+    const clearBtn = document.createElement('button')
+    clearBtn.className = 'tg-btn ghost'
+    clearBtn.textContent = t(lang, 'clear')
+    clearBtn.addEventListener('click', () => opts.onClear())
+    const resetBtn = document.createElement('button')
+    resetBtn.className = 'tg-btn ghost'
+    resetBtn.textContent = t(lang, 'reset')
+    resetBtn.addEventListener('click', () => opts.onReset())
+    const closeBtn = document.createElement('button')
+    closeBtn.className = 'tg-btn'
+    closeBtn.textContent = t(lang, 'close')
+    closeBtn.addEventListener('click', () => exports.close())
+    act.append(clearBtn, resetBtn, closeBtn)
+    box.appendChild(act)
+  }
+
+  const exports: SettingsModal = {
+    el: mask,
+    open: (state: State) => {
+      openState = state
+      isOpen = true
+      render(state)
+      mask.style.display = 'flex'
+    },
+    close: () => {
+      isOpen = false
+      mask.style.display = 'none'
+    },
+    sync: (state: State) => {
+      openState = state
+      if (isOpen) render(state)
+    },
+  }
+
+  mask.addEventListener('click', (e) => {
+    if (e.target === mask) exports.close()
+  })
+
+  return exports
+}