@whyshu/ba 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,94 @@
-# Temporary Holding Version
+# @whyshu/ba · DSH 币安账户面板
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+DSH（DeepSeek Harness）插件：在**左侧栏**增加一个「币安账户」入口，点击后由**主视图**展示：
+
+- 现货资产：非零余额、可用/锁定、现价、USDT 估值、总估值
+- 合约持仓：钱包余额、未实现盈亏、可用余额，以及每个非零持仓（方向/数量/开仓价/标记价/未实现盈亏/杠杆）
+- 行情看板：自选币对最新价、24h 涨跌、24h 成交额（无需 API Key）
+
+全部**只读**。API Key 只保存在 dsh 宿主进程（Node 侧），浏览器拿不到。
+
+## 安装
+
+**从 npm 安装（推荐；npx dsh / 其他机器）**——在 dsh 的 Plugins 面板安装包名：
+
+```text
+@whyshu/ba
+```
+
+或使用 `plugin_manager`：
+
+```text
+install_bundle target = @whyshu/ba
+registry = https://registry.npmjs.org
+```
+
+**本地开发安装**（改 `src/` / `dist/` 即时生效，宿主侧改动仍需重启 dsh）：
+
+```text
+install_bundle target = /Users/Chester/Whyshu/whyshu-ba
+```
+
+安装后左侧栏出现图标；点击进入面板。首次打开若未配置 Key，会显示配置引导。
+
+## dsh 兼容范围（双层门禁）
+
+支持 `dsh >=0.2.0-0 <0.3.0-0`（`package.json#engines.dsh`，含 0.2.x 的 rc 预发布）。
+
+1. **宿主侧**：dsh 在导入插件代码前校验 `engines.dsh`；不匹配的 bundle 会被 skip（宿主与客户端 bundle 都不会挂载），只在 stderr 打一行原因，不阻断 `dsh web` 启动。
+2. **插件侧（兜底）**：`apply()` 顶部再自行评估版本；未适配时只打一行
+   `[@whyshu/ba] 插件已自我禁用（dsh x.y.z 未适配）` 后 `return`，**不注册任何宿主 API、不抛**。
+   排障可用环境变量 `WHYSHU_BA_DSH_VERSION` 显式指定宿主版本。
+
+## 配置 API Key
+
+1. 币安 → 账户 → **API 管理** → 新建 API，权限只勾 **「启用读取」**（务必禁用提现、交易）。
+2. 建议同时开启 **IP 白名单**。
+3. 写入本机文件（权限 600，不入仓库、不进日志）：
+
+```bash
+mkdir -p ~/.dsh/argent && chmod 700 ~/.dsh/argent
+cat > ~/.dsh/argent/ba.env <<'EOF'
+BINANCE_API_KEY=你的只读 Key
+BINANCE_API_SECRET=你的 Secret
+BINANCE_PROXY=http://127.0.0.1:7890
+BINANCE_SYMBOLS=BTCUSDT,ETHUSDT,SOLUSDT,BNBUSDT
+EOF
+chmod 600 ~/.dsh/argent/ba.env
+```
+
+- `BINANCE_PROXY` 可选；本机直连 `api.binance.com` 不通时必须配（本机 ClashX 为 `http://127.0.0.1:7890`）。
+- `BINANCE_SYMBOLS` 可选，决定行情看板的币对。
+- 插件**每次请求都重读该文件**：改 Key / 代理后点面板里的「刷新」即可，无需重启 dsh。
+
+## 端点（宿主侧，只读）
+
+| 端点 | 说明 |
+| --- | --- |
+| `GET /api/whyshu-ba/health` | 版本、是否已配置 Key、是否启用代理、自选币对 |
+| `GET /api/whyshu-ba/ping` | 客户端 bundle 自检信标 |
+| `GET /api/whyshu-ba/overview` | 面板总览（行情 + 现货 + 合约；各段独立失败） |
+
+## 文件
+
+```
+src/index.js     宿主插件：注册 /api/whyshu-ba/* 端点
+src/binance.mjs  币安只读数据层：签名、代理隧道、现货/合约/行情
+dist/client.js   浏览器 bundle（手写维护，无需构建）：main + sidebar.panellist
+locale/*.json    插件管理器的标题/描述（zh/en）
+icon.svg         插件图标
+cordis.patch.yml bundle patch（insert id=whyshu-ba）
+```
+
+## 排查
+
+- **面板报「请求超时 / fetch failed」**：直连被墙 → 配 `BINANCE_PROXY`。
+- **报 401 / -2015**：Key 无效、未开现货读取权限，或本机时间偏差过大。
+- **面板显示「还没有配置币安 API Key」**：宿主没读到 `~/.dsh/argent/ba.env`，检查路径与权限。
+- **左侧栏没有图标**：确认 bundle 已安装并启用；`/api/whyshu-ba/health` 的 `clientPingAt` 为空说明浏览器端 bundle 没加载，刷新页面。
+
+## 安全
+
+- 只读：不调用下单 / 划转 / 提现接口。
+- Key 仅在宿主进程读取与签名；`/overview` 响应只含计算结果，不含 Key/Secret。
+- 不要把 `ba.env` 提交进任何仓库。

package/cordis.patch.yml

@@ -0,0 +1,6 @@
+# whyshu-ba bundle patch：只注册一行宿主插件。
+#   宿主：只读端点 /api/whyshu-ba/*（币安 Key 只在宿主进程，不下发浏览器）
+#   客户端：dist/client.js 在左侧栏注册面板入口（id=binance）+ 主视图面板（main slot, key=binance）
+- insert:
+    - id: whyshu-ba
+      name: '@whyshu/ba'

package/dist/client.js

@@ -0,0 +1,559 @@
+/**
+ * whyshu-ba · 客户端（dsh browser bundle 格式，手写维护，无需构建）
+ *
+ * 形态：左侧栏一个面板入口（sidebar.panellist, id=binance），
+ *       点击后由主视图（main slot, key=binance）渲染币安面板：
+ *       现货资产 / 合约持仓 / 行情看板 —— 全部只读。
+ *
+ * 数据来自宿主端点 `/api/whyshu-ba/*`（API Key 只在宿主进程，浏览器拿不到）。
+ * id 必须是整包名（与 package.json#name 一致），否则客户端拒绝加载。
+ */
+window.__ModuleLoader__.load({
+  id: '@whyshu/ba',
+  factory(require) {
+    const React = require('react')
+    const h = React.createElement
+    const { useCallback, useEffect, useRef, useState } = React
+
+    const NS = 'whyshu-ba'
+    const PANEL_ID = 'binance'
+    const API = '/api/whyshu-ba'
+    const REFRESH_MS = 30000
+    const ENV_PATH = '~/.dsh/argent/ba.env'
+
+    /* ───────────────────────── 文案（zh 必填 + en 基线） ───────────────────────── */
+
+    const zh = {
+      panel: '币安账户',
+      title: '币安账户',
+      subtitle: '现货资产 · 合约持仓 · 行情看板（只读）',
+      readOnly: '只读',
+      refresh: '刷新',
+      refreshing: '刷新中…',
+      updated: '更新于',
+      autoRefresh: '每 30 秒自动刷新',
+      loading: '正在读取币安数据…',
+      retry: '重试',
+      kpiSpot: '现货估值',
+      kpiWallet: '合约钱包余额',
+      kpiUnrealized: '未实现盈亏',
+      kpiAvailable: '合约可用余额',
+      spotTitle: '现货资产',
+      spotHint: '按现价折算 USDT，仅显示非零余额',
+      spotAsset: '资产',
+      spotTotal: '数量',
+      spotFree: '可用',
+      spotLocked: '锁定',
+      spotPrice: '现价',
+      spotValue: '估值 (USDT)',
+      futuresTitle: '合约持仓',
+      futuresPositions: '持仓明细',
+      posSymbol: '合约',
+      posSide: '方向',
+      posSize: '数量',
+      posEntry: '开仓价',
+      posMark: '标记价',
+      posPnl: '未实现盈亏',
+      posLeverage: '杠杆',
+      marketTitle: '行情看板',
+      marketSymbol: '币对',
+      marketPrice: '最新价',
+      marketChange: '24h 涨跌',
+      marketVolume: '24h 成交额',
+      long: '多',
+      short: '空',
+      emptySpot: '没有非零现货余额',
+      emptyPositions: '没有持仓',
+      emptyMarket: '暂无行情数据',
+      setupTitle: '还没有配置币安 API Key',
+      setupIntro: '行情看板已在工作；配置只读 Key 后即可显示现货资产与合约持仓。',
+      setupStep1: '币安 → 账户 → API 管理 → 新建 API，只勾选「启用读取」，务必禁用提现与交易。',
+      setupStep2: '把 Key / Secret 写入本机文件（权限 600，不入仓库、不进日志）：',
+      setupStep3: '保存后回到这里点「刷新」，无需重启 dsh。',
+      setupHint: '建议单独建一个只读 Key，并开启 IP 白名单。代理仅在直连不通时需要。',
+      setupPath: '文件位置',
+      errTitle: '数据读取失败',
+      errProxyHint: '网络不通：在 ba.env 里配置 BINANCE_PROXY（本机可用 http://127.0.0.1:7890）后重试。',
+      errKeyHint: 'Key 无效或无读取权限：确认只读 Key、现货读取权限，并检查服务器时间。',
+      errRegionHint: '当前地区被限制访问，请检查代理节点。',
+      footnote: '只读面板 · 每 30 秒自动刷新 · API Key 只在 dsh 宿主进程使用',
+      proxyOn: '代理已启用',
+      proxyOff: '直连',
+      noValue: '—',
+    }
+
+    const en = {
+      panel: 'Binance account',
+      title: 'Binance account',
+      subtitle: 'Spot assets · futures positions · market board (read-only)',
+      readOnly: 'Read-only',
+      refresh: 'Refresh',
+      refreshing: 'Refreshing…',
+      updated: 'Updated',
+      autoRefresh: 'Auto-refresh every 30s',
+      loading: 'Loading Binance data…',
+      retry: 'Retry',
+      kpiSpot: 'Spot value',
+      kpiWallet: 'Futures wallet',
+      kpiUnrealized: 'Unrealized PnL',
+      kpiAvailable: 'Futures available',
+      spotTitle: 'Spot assets',
+      spotHint: 'Valued in USDT at the latest price; zero balances hidden',
+      spotAsset: 'Asset',
+      spotTotal: 'Amount',
+      spotFree: 'Free',
+      spotLocked: 'Locked',
+      spotPrice: 'Price',
+      spotValue: 'Value (USDT)',
+      futuresTitle: 'Futures positions',
+      futuresPositions: 'Open positions',
+      posSymbol: 'Symbol',
+      posSide: 'Side',
+      posSize: 'Size',
+      posEntry: 'Entry',
+      posMark: 'Mark',
+      posPnl: 'Unrealized PnL',
+      posLeverage: 'Lev.',
+      marketTitle: 'Market board',
+      marketSymbol: 'Pair',
+      marketPrice: 'Last',
+      marketChange: '24h change',
+      marketVolume: '24h volume',
+      long: 'Long',
+      short: 'Short',
+      emptySpot: 'No non-zero spot balances',
+      emptyPositions: 'No open positions',
+      emptyMarket: 'No market data',
+      setupTitle: 'Binance API key is not configured yet',
+      setupIntro: 'The market board already works. Add a read-only key to show spot assets and futures positions.',
+      setupStep1: 'Binance → Account → API Management → Create API, enable only "Enable Reading"; disable withdrawals and trading.',
+      setupStep2: 'Write the key and secret into a local file (mode 600, never committed or logged):',
+      setupStep3: 'Save, then click Refresh here. No dsh restart is needed.',
+      setupHint: 'Prefer a dedicated read-only key with an IP allowlist. A proxy is needed only when direct access is blocked.',
+      setupPath: 'File',
+      errTitle: 'Could not load data',
+      errProxyHint: 'Network unreachable: set BINANCE_PROXY in ba.env (this machine can use http://127.0.0.1:7890) and retry.',
+      errKeyHint: 'Invalid key or missing read permission: verify the read-only key, spot reading permission, and host time.',
+      errRegionHint: 'This region is restricted; try another proxy node.',
+      footnote: 'Read-only · auto-refresh every 30s · API key stays in the dsh host process',
+      proxyOn: 'proxy on',
+      proxyOff: 'direct',
+      noValue: '—',
+    }
+
+    /* ───────────────────────── 格式化 ───────────────────────── */
+
+    const pad2 = (n) => (n < 10 ? '0' + n : String(n))
+
+    function fmtNum(value, maxFrac = 8) {
+      const n = Number(value)
+      if (!Number.isFinite(n)) return '—'
+      if (n === 0) return '0'
+      const abs = Math.abs(n)
+      const frac = abs >= 1000 ? 2 : abs >= 1 ? Math.min(maxFrac, 4) : Math.min(maxFrac, 6)
+      return n.toLocaleString('en-US', { maximumFractionDigits: frac })
+    }
+
+    function fmtPrice(value) {
+      const n = Number(value)
+      if (!Number.isFinite(n) || n <= 0) return '—'
+      const frac = n >= 1000 ? 2 : n >= 1 ? 4 : 6
+      return n.toLocaleString('en-US', { maximumFractionDigits: frac })
+    }
+
+    function fmtUsd(value) {
+      const n = Number(value)
+      if (!Number.isFinite(n)) return '—'
+      return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+    }
+
+    function fmtPct(value) {
+      const n = Number(value)
+      if (!Number.isFinite(n)) return '—'
+      return (n > 0 ? '+' : '') + n.toFixed(2) + '%'
+    }
+
+    function fmtCompact(value) {
+      const n = Number(value)
+      if (!Number.isFinite(n)) return '—'
+      if (Math.abs(n) >= 1e9) return (n / 1e9).toFixed(2) + 'B'
+      if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(2) + 'M'
+      if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(2) + 'K'
+      return n.toFixed(2)
+    }
+
+    /** 24 小时制：14:05:09 */
+    function fmtTime(iso) {
+      const d = iso instanceof Date ? iso : new Date(iso || Date.now())
+      if (Number.isNaN(d.getTime())) return ''
+      return pad2(d.getHours()) + ':' + pad2(d.getMinutes()) + ':' + pad2(d.getSeconds())
+    }
+
+    function toneClass(value) {
+      const n = Number(value)
+      if (!Number.isFinite(n) || n === 0) return ''
+      return n > 0 ? ' wba-pos' : ' wba-neg'
+    }
+
+    function errorHint(message, t) {
+      const text = String(message || '')
+      if (/timeout|超时|ECONN|ENOTFOUND|EAI_AGAIN|socket hang up|fetch failed/i.test(text)) return t('errProxyHint')
+      if (/401|403|451|-2015|invalid api-key|signature|permission|apikey/i.test(text)) return t('errKeyHint')
+      if (/restricted|region|451/i.test(text)) return t('errRegionHint')
+      return ''
+    }
+
+    /* ───────────────────────── 样式（只注入一次；全部用 dsh 主题 token） ───────────────────────── */
+
+    const CSS = `
+.wba-root{display:flex;flex-direction:column;height:100%;min-height:0;color:var(--dsw-alias-label-primary);
+  font:14px/1.55 var(--dsw-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif)}
+.wba-head{display:flex;align-items:flex-start;gap:12px;padding:16px 22px 10px;flex-wrap:wrap}
+.wba-head-main{display:flex;align-items:center;gap:10px;min-width:0}
+.wba-head-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
+.wba-title{font-size:16px;font-weight:600;line-height:1.3}
+.wba-sub{font-size:12px;color:var(--dsw-alias-label-secondary);margin-top:1px}
+.wba-chip{border:1px solid var(--dsw-alias-border-l2);border-radius:999px;padding:1px 8px;font-size:11px;
+  color:var(--dsw-alias-label-secondary);white-space:nowrap}
+.wba-time{font-size:12px;color:var(--dsw-alias-label-secondary);white-space:nowrap}
+.wba-btn{border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);
+  border-radius:8px;padding:4px 12px;font:12px/1.4 inherit;cursor:pointer;white-space:nowrap}
+.wba-btn:hover{background:rgba(127,127,127,.10)}
+.wba-btn:disabled{opacity:.55;cursor:default}
+.wba-body{flex:1 1 auto;min-height:0;overflow:auto;padding:6px 22px 28px;display:flex;flex-direction:column;gap:12px}
+.wba-card{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:12px;padding:12px 14px;min-width:0}
+.wba-card-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
+.wba-card-title{margin:0;font-size:13px;font-weight:600}
+.wba-card-sub{font-size:11px;color:var(--dsw-alias-label-secondary)}
+.wba-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
+.wba-kpi{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:12px;padding:10px 14px}
+.wba-kpi b{display:block;font-size:22px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums}
+.wba-kpi span{display:block;font-size:11px;color:var(--dsw-alias-label-secondary);margin-top:2px}
+.wba-table{display:flex;flex-direction:column;min-width:0}
+.wba-tr{display:grid;gap:10px;align-items:center;padding:6px 2px;border-bottom:1px dashed var(--dsw-alias-border-l1)}
+.wba-tr:last-child{border-bottom:0}
+.wba-th{font-size:11px;color:var(--dsw-alias-label-secondary);padding-bottom:4px;border-bottom:1px solid var(--dsw-alias-border-l1)}
+.wba-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
+.wba-cell.wba-name{font-weight:600}
+.wba-cell.wba-num{text-align:right}
+.wba-cell.wba-total{font-weight:600}
+.wba-pos{color:var(--dsw-alias-state-success-primary)}
+.wba-neg{color:var(--dsw-alias-state-error-primary)}
+.wba-dim{color:var(--dsw-alias-label-secondary)}
+.wba-note{font-size:12px;color:var(--dsw-alias-label-secondary);background:rgba(127,127,127,.07);border-radius:10px;padding:10px 12px}
+.wba-note b{color:var(--dsw-alias-label-primary)}
+.wba-empty{padding:16px 2px;text-align:center;color:var(--dsw-alias-label-secondary);font-size:12px}
+.wba-loading{padding:40px 0;text-align:center;color:var(--dsw-alias-label-secondary);font-size:13px}
+.wba-err{margin:0;padding:12px 14px;border-radius:12px;border:1px solid var(--dsw-alias-state-error-primary);
+  background:rgba(248,113,113,.10);font-size:13px;white-space:pre-wrap;word-break:break-word}
+.wba-err-hint{margin-top:6px;font-size:12px;color:var(--dsw-alias-label-secondary)}
+.wba-setup h3{margin:0 0 6px;font-size:14px}
+.wba-setup p{margin:6px 0;font-size:13px}
+.wba-setup ol{margin:8px 0 8px 18px;padding:0;font-size:13px}
+.wba-setup li{margin:4px 0}
+.wba-code{background:var(--dsw-alias-bg-base);border:1px solid var(--dsw-alias-border-l1);border-radius:8px;
+  padding:8px 10px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
+.wba-foot{font-size:11px;color:var(--dsw-alias-label-secondary);padding:0 2px 4px;display:flex;gap:10px;flex-wrap:wrap}
+`
+
+    function injectCss() {
+      try {
+        if (typeof document === 'undefined' || !document.head) return
+        if (document.getElementById('whyshu-ba-css')) return
+        const style = document.createElement('style')
+        style.id = 'whyshu-ba-css'
+        style.textContent = CSS
+        document.head.appendChild(style)
+      } catch { /* noop */ }
+    }
+
+    /* ───────────────────────── 小部件 ───────────────────────── */
+
+    /** 左侧栏图标：原创「三根向上蜡烛」图形，跟随主题色。 */
+    function BinanceIcon(props) {
+      const size = (props && props.size) || 20
+      return h('svg', {
+        width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
+        'aria-hidden': true, style: { display: 'block', flex: '0 0 auto' },
+      },
+        h('rect', { x: 4, y: 11, width: 3.2, height: 7, rx: 1, fill: 'currentColor', opacity: 0.55 }),
+        h('rect', { x: 10.4, y: 7, width: 3.2, height: 11, rx: 1, fill: 'currentColor', opacity: 0.8 }),
+        h('rect', { x: 16.8, y: 3.5, width: 3.2, height: 14.5, rx: 1, fill: 'currentColor' }),
+        h('path', { d: 'M4.5 20.5h15', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round' }))
+    }
+
+    function Kpi(props) {
+      return h('div', { className: 'wba-kpi' },
+        h('b', { className: props.tone ? toneClass(props.tone).trim() : '' }, props.value),
+        h('span', null, props.label))
+    }
+
+    /** 通用表格：cols 为 grid-template-columns；rows 为二维数组；首列左对齐，其余右对齐。 */
+    function Table(props) {
+      const rows = props.rows || []
+      if (!rows.length) return h('div', { className: 'wba-empty' }, props.empty || '')
+      const cellClass = (index, extra) => 'wba-cell ' + (index === 0 ? 'wba-name' : 'wba-num') + (extra || '')
+      return h('div', { className: 'wba-table' },
+        h('div', { className: 'wba-tr wba-th', style: { gridTemplateColumns: props.cols } },
+          props.head.map((label, i) => h('span', { key: i, className: cellClass(i) }, label))),
+        rows.map((row, ri) => h('div', { key: ri, className: 'wba-tr', style: { gridTemplateColumns: props.cols } },
+          row.map((cell, ci) => h('span', { key: ci, className: cellClass(ci, cell && cell.toneClass ? ' ' + cell.toneClass : '') },
+            cell && cell.node !== undefined ? cell.node : String(cell === undefined || cell === null ? '—' : cell))))))
+    }
+
+    function toneCell(value, formatter) {
+      return { toneClass: toneClass(value).trim(), node: h('span', null, formatter(value)) }
+    }
+
+    function SetupCard(props) {
+      const t = props.t
+      return h('div', { className: 'wba-card wba-setup' },
+        h('h3', null, t('setupTitle')),
+        h('p', null, t('setupIntro')),
+        h('ol', null,
+          h('li', null, t('setupStep1')),
+          h('li', null, t('setupStep2'))),
+        h('div', { className: 'wba-note' }, t('setupPath') + ': ', h('b', null, ENV_PATH)),
+        h('div', { className: 'wba-code' },
+          'BINANCE_API_KEY=...\nBINANCE_API_SECRET=...\nBINANCE_PROXY=http://127.0.0.1:7890'),
+        h('p', { className: 'wba-dim' }, t('setupStep3')),
+        h('p', { className: 'wba-dim' }, t('setupHint')))
+    }
+
+    function ErrorsCard(props) {
+      const t = props.t
+      return h('div', { className: 'wba-card' },
+        h('div', { className: 'wba-card-head' }, h('h3', { className: 'wba-card-title' }, t('errTitle'))),
+        props.errors.map((e, i) => {
+          const hint = errorHint(e.message, t)
+          return h('div', { key: i, className: 'wba-err', style: i ? { marginTop: 8 } : undefined },
+            '[' + e.section + '] ' + e.message,
+            hint ? h('div', { className: 'wba-err-hint' }, hint) : null)
+        }))
+    }
+
+    /* ───────────────────────── 主面板 ───────────────────────── */
+
+    function BinancePanel(props) {
+      const t = (props && props.t) || ((key) => key)
+      const [data, setData] = useState(null)
+      const [error, setError] = useState(null)
+      const [loading, setLoading] = useState(true)
+      const [fetchedAt, setFetchedAt] = useState(null)
+      const alive = useRef(true)
+
+      const load = useCallback(async () => {
+        setLoading(true)
+        try {
+          const res = await fetch(API + '/overview', { cache: 'no-store' })
+          const body = await res.json().catch(() => null)
+          if (!alive.current) return
+          if (!res.ok || !body || body.ok !== true) {
+            const message = (body && (body.message || body.error)) || ('HTTP ' + res.status)
+            setError(String(message))
+            return
+          }
+          setData(body.data)
+          setError(null)
+          setFetchedAt(new Date())
+        } catch (e) {
+          if (alive.current) setError(String((e && e.message) || e))
+        } finally {
+          if (alive.current) setLoading(false)
+        }
+      }, [])
+
+      useEffect(() => {
+        alive.current = true
+        load()
+        const timer = setInterval(load, REFRESH_MS)
+        return () => { alive.current = false; clearInterval(timer) }
+      }, [load])
+
+      const head = h('div', { className: 'wba-head' },
+        h('div', { className: 'wba-head-main' },
+          h(BinanceIcon, { size: 24, active: true }),
+          h('div', null,
+            h('div', { className: 'wba-title' }, t('title')),
+            h('div', { className: 'wba-sub' }, t('subtitle')))),
+        h('div', { className: 'wba-head-actions' },
+          h('span', { className: 'wba-chip' }, t('readOnly')),
+          fetchedAt ? h('span', { className: 'wba-time' }, t('updated') + ' ' + fmtTime(fetchedAt)) : null,
+          h('span', { className: 'wba-time' }, t('autoRefresh')),
+          h('button', { type: 'button', className: 'wba-btn', onClick: load, disabled: loading },
+            loading ? t('refreshing') : t('refresh'))))
+
+      if (!data && loading) {
+        return h('div', { className: 'wba-root' }, head, h('div', { className: 'wba-loading' }, t('loading')))
+      }
+      if (!data && error) {
+        return h('div', { className: 'wba-root' }, head,
+          h('div', { className: 'wba-body' },
+            h('div', { className: 'wba-err' }, error,
+              errorHint(error, t) ? h('div', { className: 'wba-err-hint' }, errorHint(error, t)) : null),
+            h('div', null, h('button', { type: 'button', className: 'wba-btn', onClick: load }, t('retry')))))
+      }
+
+      const body = []
+      if (error) {
+        body.push(h('div', { key: 'soft-err', className: 'wba-err' }, error))
+      }
+      if (data && !data.configured) body.push(h(SetupCard, { key: 'setup', t }))
+      if (data && data.errors && data.errors.length) body.push(h(ErrorsCard, { key: 'errors', t, errors: data.errors }))
+
+      const spot = data && data.spot
+      const futures = data && data.futures
+      if (spot || futures) {
+        const kpis = []
+        if (spot) kpis.push(h(Kpi, { key: 'spot', label: t('kpiSpot'), value: fmtUsd(spot.totalUSDT) }))
+        if (futures) {
+          kpis.push(h(Kpi, { key: 'wallet', label: t('kpiWallet'), value: fmtUsd(futures.totalWalletBalance) }))
+          kpis.push(h(Kpi, { key: 'upnl', label: t('kpiUnrealized'), value: fmtUsd(futures.totalUnrealizedProfit), tone: futures.totalUnrealizedProfit }))
+          kpis.push(h(Kpi, { key: 'avail', label: t('kpiAvailable'), value: fmtUsd(futures.availableBalance) }))
+        }
+        body.push(h('div', { key: 'kpis', className: 'wba-kpis' }, kpis))
+      }
+
+      if (spot) {
+        const rows = (spot.rows || []).map((r) => [
+          r.asset,
+          fmtNum(r.total),
+          fmtNum(r.free),
+          fmtNum(r.locked),
+          r.priceUSDT ? fmtPrice(r.priceUSDT) : '—',
+          r.valueUSDT === null ? '—' : fmtUsd(r.valueUSDT),
+        ])
+        body.push(h('div', { key: 'spot', className: 'wba-card' },
+          h('div', { className: 'wba-card-head' },
+            h('h3', { className: 'wba-card-title' }, t('spotTitle')),
+            h('span', { className: 'wba-card-sub' }, t('spotHint')),
+            h('span', { className: 'wba-card-sub', style: { marginLeft: 'auto' } }, t('kpiSpot') + ' ' + fmtUsd(spot.totalUSDT))),
+          h(Table, {
+            cols: '1.1fr .9fr .9fr .9fr .9fr 1.1fr',
+            head: [t('spotAsset'), t('spotTotal'), t('spotFree'), t('spotLocked'), t('spotPrice'), t('spotValue')],
+            rows: rows,
+            empty: t('emptySpot'),
+          })))
+      }
+
+      if (futures) {
+        const posRows = (futures.positions || []).map((p) => [
+          p.symbol,
+          p.side === 'LONG' ? t('long') : t('short'),
+          fmtNum(Math.abs(p.positionAmt)),
+          fmtPrice(p.entryPrice),
+          fmtPrice(p.markPrice),
+          toneCell(p.unrealizedProfit, (v) => (v > 0 ? '+' : '') + fmtUsd(v)),
+          p.leverage ? p.leverage + '×' : '—',
+        ])
+        body.push(h('div', { key: 'futures', className: 'wba-card' },
+          h('div', { className: 'wba-card-head' },
+            h('h3', { className: 'wba-card-title' }, t('futuresTitle')),
+            h('span', { className: 'wba-card-sub' }, t('futuresPositions')),
+            h('span', { className: 'wba-card-sub', style: { marginLeft: 'auto' } },
+              t('kpiWallet') + ' ' + fmtUsd(futures.totalWalletBalance))),
+          h(Table, {
+            cols: '1fr .55fr .9fr .9fr .9fr 1.1fr .6fr',
+            head: [t('posSymbol'), t('posSide'), t('posSize'), t('posEntry'), t('posMark'), t('posPnl'), t('posLeverage')],
+            rows: posRows,
+            empty: t('emptyPositions'),
+          })))
+      }
+
+      if (data && data.tickers && data.tickers.length) {
+        const tickerRows = data.tickers.map((k) => [
+          k.symbol,
+          fmtPrice(k.lastPrice),
+          toneCell(k.priceChangePercent, fmtPct),
+          fmtCompact(k.quoteVolume) + ' USDT',
+        ])
+        body.push(h('div', { key: 'market', className: 'wba-card' },
+          h('div', { className: 'wba-card-head' }, h('h3', { className: 'wba-card-title' }, t('marketTitle'))),
+          h(Table, {
+            cols: '1fr 1fr 1fr 1fr',
+            head: [t('marketSymbol'), t('marketPrice'), t('marketChange'), t('marketVolume')],
+            rows: tickerRows,
+            empty: t('emptyMarket'),
+          })))
+      } else if (data && !(data.errors || []).some((e) => e.section === 'market')) {
+        body.push(h('div', { key: 'market-empty', className: 'wba-card' },
+          h('div', { className: 'wba-card-head' }, h('h3', { className: 'wba-card-title' }, t('marketTitle'))),
+          h('div', { className: 'wba-empty' }, t('emptyMarket'))))
+      }
+
+      if (data) {
+        body.push(h('div', { key: 'foot', className: 'wba-foot' },
+          h('span', null, t('footnote')),
+          h('span', null, data.proxy ? t('proxyOn') : t('proxyOff'))))
+      }
+
+      return h('div', { className: 'wba-root' }, head, h('div', { className: 'wba-body' }, body))
+    }
+
+    /** 兜底错误边界：数据形状异常时显示错误卡片，而不是把整个 slot 弄崩。 */
+    class PanelBoundary extends React.Component {
+      constructor(props) { super(props); this.state = { error: null } }
+      static getDerivedStateFromError(error) { return { error } }
+      render() {
+        if (this.state.error) {
+          const message = String((this.state.error && this.state.error.message) || this.state.error)
+          return h('div', { className: 'wba-root' },
+            h('div', { className: 'wba-body' },
+              h('div', { className: 'wba-err' }, '面板渲染失败 / panel render failed: ' + message)))
+        }
+        return this.props.children
+      }
+    }
+    function BinancePanelSafe(props) {
+      return h(PanelBoundary, null, h(BinancePanel, props))
+    }
+
+    /* ───────────────────────── 注册 ───────────────────────── */
+
+    const name = 'whyshu-ba-client'
+    const inject = ['slots', 'locale']
+
+    /** 安全执行一次注册：任何异常只记日志，绝不让客户端 apply 抛出（抛了会空白槽位/页面）。 */
+    function safe(label, fn) {
+      try {
+        return fn()
+      } catch (e) {
+        try {
+          console.warn('[whyshu-ba] ' + label + ' 失败（已忽略，不影响 dsh 页面）:', (e && e.message) || e)
+        } catch { /* 日志本身失败也不能抛 */ }
+        return undefined
+      }
+    }
+
+    function apply(ctx) {
+      // 整体 try/catch：客户端 apply 抛异常会让整个页面/槽位崩溃。
+      try {
+        safe('语言字典', () => ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'whyshu-ba: dictionaries'))
+        const t = safe('locale.bind', () => ctx.locale.bind(NS)) || ((key) => key)
+        safe('样式注入', injectCss)
+        // 自检信标：宿主 /health 会回报 clientPingAt ⇒ 能区分"bundle 没加载"与"加载了但没显示"
+        safe('ping', () => { fetch(API + '/ping?from=client').catch(() => {}) })
+
+        // ⛔ 永不抛出：注册失败只影响这个面板，不能让 web boot 报 "entry did not activate"
+        safe('main 面板', () => ctx.slots.inject('main', () => ctx.slots.register({
+          name: 'main',
+          key: PANEL_ID,
+          locale: NS,
+        }, BinancePanelSafe)))
+        safe('侧栏入口', () => ctx.slots.inject('sidebar.panellist', () => ctx.slots.register({
+          name: 'sidebar.panellist',
+          id: PANEL_ID,
+          order: 20,
+          locale: NS,
+          label: () => t('panel'),
+        }, BinanceIcon)))
+      } catch (e) {
+        try {
+          console.warn('[whyshu-ba] 客户端 apply 异常已忽略（不影响 dsh 页面）:', (e && e.message) || e)
+        } catch { /* noop */ }
+      }
+    }
+
+    return { name, inject, apply }
+  },
+})

package/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="Binance account panel">
+  <rect x="8" y="30" width="10" height="20" rx="3" fill="currentColor" opacity="0.55"/>
+  <rect x="26" y="18" width="10" height="32" rx="3" fill="currentColor" opacity="0.8"/>
+  <rect x="44" y="8" width="10" height="42" rx="3" fill="currentColor"/>
+  <path d="M10 58h44" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+</svg>