# AI量化（/arb-records/）· 定稿規格

> 給 Web3技術。Eason 已選定：**摘要卡 D2 軌道粒子**、**今日套利 C 交易點時間軸**、**12 條鏈的 logo**（鏈按鈕＋每筆紀錄）。
> 基準：preview 版面（commit bcf7a38），也就是沒有分類、鏈按鈕在列表正上方、預設排序「實得最高」。
> 參考實作：`mockup.html`，不帶參數打開就是定稿。審閱頁：https://eason-arb-design.pages.dev/ 。所有數字都是樣本資料。
> 錄影：`video/final.mp4`。截圖：`renders/final-{390,360}-{zh-TW,en,ms}.png`。對照：`renders/final-compare@2x.png`。

## 0. 原則
- 風格 01 曜黑琉璃：近黑玻璃、白色 Inter、灰色 #A1A1A6 / #6E6E73，唯一強調色是 #F7931A。沿用 `globals.css` 的 token。
- 一個焦點：摘要卡的「24 小時實得」大數字。大數字用**白色**，小數點用橘色、小數部分用灰色，不用綠色。
  原因：所有公開紀錄都是正的，綠色沒有比較意義，反而會跟紀錄列表的 `+$` 綠字搶焦點。
- 字級：內文 ≥ 15px，次要文字 ≥ 13px。
- 不加英文翻譯行、說明文字，也不加跟單、買入、連接錢包的按鈕。
- 所有動畫在 `prefers-reduced-motion: reduce` 時關閉，直接顯示最終值。分頁隱藏時暫停 rAF。

## 1. 版面順序（手機，桌面 ≥1024 時左欄 sticky）
```
返回 → 標題 → 摘要卡（D2）→ 今日套利（C）→ 鏈按鈕 → 最新｜實得最高 → topNote → 列表 → 載入更多
```
- 桌面：左欄（340px，sticky）放摘要卡和今日套利，右欄放鏈按鈕、排序、列表。
- 鏈按鈕會同時篩選摘要卡、今日套利和列表。
- 目前 owner 設定（e69573c）是摘要卡預設關閉。開關沿用後台「產品 → AI量化」：關閉時整張摘要卡不顯示，今日套利照常顯示。

## 2. 摘要卡 · D2 軌道粒子
結構：
```html
<section class="ar-sum v-d2">
  <div class="ar-live on"><i></i>即時<span>更新於 11:49:23</span></div>
  <div class="ar-hero ring"><span>24 小時實得</span><b data-hero>$415.29</b>
    <div class="dwrap"><svg class="donut">…5 段 circle[data-dc=chainId]…</svg><canvas class="orb"/></div></div>
  <div class="scan"><span class="rd"></span><span class="l">24 小時掃描交易數</span><b>1,284,903</b></div>
  <dl class="ar-mx"><div><dt>24 小時筆數</dt><dd>16</dd></div><div><dt>24 小時毛利 / Gas</dt><dd>$424.93<small>Gas $4.59</small></dd></div></dl>
  <div class="ar-chs">…每條「有紀錄的」鏈一列：logo 20px、名稱、筆數、實得…</div>
  <p class="ar-tot">累計 16 筆 · 2026/10/26 起</p>
</section>
```
- **環**：84px，每條鏈一段，按實得比例分配，段與段之間留 1.2% 的間隙。顏色用鏈色（見第 5 節的 `cc`）。大數字 42px，放在環的左邊。
- **載入**（≤1.5s）：
  - 數字從 0 跑到目標值（1.1s）。
  - 環的各段依序畫出（每段延遲 120ms）。
  - 最多 14 顆鏈色光點淡入（每顆延遲 65ms），在環外 10.5px 的軌道上繞。
  - canvas 是 124px，畫的時候以 2× 繪製。
- **更新**（5 秒輪詢，只動有變的部分）：
  - 數字從舊值跑到新值。
  - 環先不動。一顆該鏈顏色的光點從左邊沿 Bézier 曲線飛到那一段的中點（780ms）。
  - 光點到了以後：環才長大、那一段閃一下、光點加入繞圈（最多 14 顆，超過時移除最舊的一顆）。
- **掃描交易數**：在兩次輪詢之間，從舊值線性補到新值（4.8s）。這只是補間，不是編造的數字。
- **每鏈列**：只列 24 小時內有紀錄的鏈，依實得排序。
- **地址數**：預設不顯示，由後台開關控制。「機器人」這個詞全站都不再使用。
- **reduced motion**：沒有光點、沒有飛行動畫，數字和環直接顯示最終值。

## 3. 今日套利 · C 交易點時間軸
```html
<section class="ar-chart cc"><div class="hd"><h2>今日套利</h2><span class="tot">$439.96<small>14 筆</small></span></div>
  <div class="plot p2" style="height:156px"><svg>…</svg></div>
  <div class="axis"><span>00</span><span>06</span><span>12</span><span>18</span><span>23</span></div></section>
```
- **x 軸**：當地 00:00–24:00，x 位置就是交易的真實時間。現在之後的時段用 `rgba(255,255,255,.025)` 的底色淡化。「現在」畫一條橘色虛線，加一個會脈動的橘點。
- **點**：一筆交易一顆點。
  - 半徑 `r = 3.6 + √(kept / 當日最大) × 12.4` px（用面積表示金額）。
  - 顏色是鏈色，`fill-opacity .88`，加同色的柔光。
  - 排法：由大到小貪婪擺放，只往上下堆疊，x 不動。
- **焦點**：當日最大一筆（且 ≥ $10）。點內放鏈 logo，外面加 2px 橘圈並發光。金額 `+$240.64`（15px 粗體白字）寫在圖頂，用橘色虛線連到那顆點。
- **背景**：今日累計的淡面積加細線（monotone cubic，白色 28%），只當背景提示。
- **載入**（≤1.2s）：點依時間順序從上方掉落（彈性曲線，總共錯開 ≤0.9s）。累計線和金額標籤在 0.7s 後淡入。
- **新交易**：新的點從右上方沿弧線飛進來（800ms，跟 D2 的光點同一種語言），落地後泛一圈漣漪。標題的總額從舊值跑到新值。其他的點不動。
- **點選**（點一下，再點一次關閉）：提示框顯示 `[logo] 鏈名 · hh:mm`、`+$實得`、`毛利`、`Gas`。點的可點範圍至少是半徑 13px。
- **很少筆**（例如 3 筆）：照常顯示，最大那筆（≥ $10）一樣是焦點。
- **全 0**：只顯示基準線、脈動的現在點，以及 `arb.empty`。
- **超過 150 筆時的退路**（見 `renders/final-chart-busy*.png`，網址參數 `day=busy`）：
  - 只把**前 36 大**畫成點，而且縮小一號：`r = 2.2 + √(kept / max) × 7.5`。
  - 其餘的交易畫成底部的鏈色小刻度（1.5px × 7px）。
  - 總額和筆數照常計算。
- 實作是純 SVG 加 CSS，不用外部函式庫。每次更新只重畫這張卡的 SVG。

## 4. 鏈按鈕與每筆紀錄
### 4.1 鏈按鈕（12 鏈）
```tsx
<button role="tab" aria-selected={on} className={on ? "on" : ""}>
  <span className="cl">
    <img className="clogo" src={`/chains/${c.key}.svg`} width={16} height={16} alt="" />
    <MonoLogo k={c.key} className="cm" />          {/* inline SVG, fill=currentColor，只在 .on 時顯示 */}
    {live && <i className="lv" />}                   {/* 即時綠點，疊在 logo 右下角，取代原本的 .dot */}
  </span>{c.name}
</button>
<button …><span className="cl all"><AllGlyph className="cm" /></span>{t("arb.chainAll")}</button>   {/* 全部：中性的四點圖示 */}
```
```css
.ar-chips button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px 0 10px;border-radius:var(--r-pill);font-size:15px;font-weight:600;white-space:nowrap}
.ar-chips button.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
.ar-chips .cl{position:relative;width:16px;height:16px;flex:none}
.ar-chips .cl .clogo{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 .5px rgba(255,255,255,.16)}
.ar-chips .cl .clogo[src$="base.svg"]{border-radius:3.5px}
.ar-chips .cl .cm{position:absolute;inset:0;width:16px;height:16px;display:none}
.ar-chips .cl.all .cm{display:block;color:var(--text-3)}
.ar-chips button.on .cl .clogo{display:none}
.ar-chips button.on .cl .cm{display:block;color:var(--accent-ink)}
.ar-chips .lv{position:absolute;right:-2px;bottom:-2px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 1.5px #1b1b1e}
.ar-chips button.on .lv{background:var(--accent-ink);box-shadow:0 0 0 1.5px var(--accent)}
```
- 選中的橘色按鈕上，logo 一律改用**深色單色版**。原因：BSC 和 Blast 的黃色、Optimism 和 Avalanche 的紅色放在 #F7931A 上都會糊掉。
- 單色版一定要用 inline SVG。`<img>` 不能換色，CSS mask 在不同來源下有 CORS 問題。
- 按鈕列可以橫向捲動，兩側用漸層遮罩。選中的按鈕自動捲到中間。還沒有資料的鏈也可以選，選了會顯示 `arb.empty`。

### 4.2 每筆紀錄（preview 結構，加 logo）
```tsx
<li>
  <div className="l1"><span className={`ar-cb c${chain}`}><img className="clogo" src={`/chains/${key}.svg`} width={16} height={16} alt="" />{c.name}</span>
    <span className="tk">{tokens.join(" · ")}</span><b className="v pos">+{usd(kept)}</b></div>
  <div className="l2"><time>{md} {hm}</time><span className="dx">{dexes.join(" → ")}</span></div>
  <div className="l3"><span>{t("arb.gross")} <b>{usd(gross)}</b></span><span>{t("arb.gas")} <b>{usd(gas)}</b></span></div>
  <div className="l3"><a href={`${x}/tx/${tx}`}>{t("arb.tx")} {short(tx,8)} ↗</a><a className="ad" href={`${x}/address/${bot}`}><PersonIcon />{short(bot)} ↗</a></div>
</li>
```
```css
.ar-cb{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px 0 4px;border-radius:8px;font-size:13px;font-weight:600;background:rgba(255,255,255,.07);color:var(--text-2);white-space:nowrap;flex:none}
.ar-list .l1{display:flex;align-items:flex-start;gap:8px}
.ar-list .l1 .tk{flex:1;min-width:0;font-size:16px;font-weight:600;line-height:24px;overflow-wrap:anywhere}   /* 換行，不截斷 */
.ar-list .l1 .v{flex:none;line-height:24px;white-space:nowrap}
.ar-list .l2,.ar-list .l3{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--text-2)}
.ar-list .l2 .dx{color:var(--text-3)}
.ar-list .l3 a{display:inline-flex;align-items:center;gap:3px;color:var(--accent);font:500 13px var(--mono);white-space:nowrap}
```
- 「實得最高」排序時，新紀錄會插在排序後的位置，不一定在最上面。新的那一列有橘色左邊條，淡出時間 2.4s。

### 4.3 360 規則（已在 zh-TW / en / ms / es 量過）
1. **地址連結放在交易連結旁邊**（l3 第二行）。不要放在毛利 / Gas 那一行，否則 ms / en 會把地址擠到單獨一行。
2. **代幣名稱換行，不截斷**（最多兩行）。值和第一行對齊（line-height 24px）。
3. 鏈標籤用全名（BSC / Ethereum / Base…），跟 preview 一致。
4. 摘要卡的「24 小時掃描交易數」標籤在 ms / es 會折成兩行，數字靠右，這樣可以接受。其他地方都不換行、不截斷。
5. 鏈按鈕、排序、提示框在 360 下都不會超出畫面。

## 5. 鏈 logo 素材
來源：`/workspace/brand/chain-logos/`，授權與來源見同目錄的 README.md（web3icons，MIT）。全部是 `viewBox 0 0 24 24`。
建議放到：
```
public/chains/{key}.svg        彩色圓徽章（Base 是圓角方塊）
public/chains/mono/{key}.svg   單色（fill=currentColor），選中的 chip 用
public/chains/all.svg          「全部」四點圖示（currentColor）
```
| key | 名稱 | chainId | cc（環、點、段的顏色） |
|---|---|---|---|
| bsc | BSC | 56 | #F3BA2F |
| ethereum | Ethereum | 1 | #8A9BF0 |
| base | Base | 8453 | #3B6CFF |
| arbitrum | Arbitrum | 42161 | #4EA8EF |
| polygon | Polygon | 137 | #9B6BFF |
| optimism | Optimism | 10 | #FF0420 |
| avalanche | Avalanche | 43114 | #E84142 |
| linea | Linea | 59144 | #61DFFF |
| unichain | Unichain | 130 | #F50DB4 |
| zksync | zkSync | 324 | #8C8DFC |
| blast | Blast | 81457 | #FCFC03 |
| sonic | Sonic | 146 | #F5F5F7 |

## 6. i18n（`src/i18n/locales/arb/*.json`）
沿用 preview 已有的 key：`title, live, updated, chainAll, sortTime, sortKept, topNote, sCount, sKept, sGross, sTxs, gross, gas, tx, empty, err, newN, total, p1`。
**要新增或修正的 key：**
| key | zh-TW | en | ms | es |
|---|---|---|---|---|
| arb.today | 今日套利 | Today | Hari ini | Hoy |
| arb.nTx | {n} 筆 | {n} txs | {n} tx | {n} txs |
| arb.nTx_one（單數） | 1 筆 | **1 tx** | 1 tx | 1 tx |
| arb.more | 載入更多 | Load more | Muat lagi | Cargar más |
| arb.addr（aria-label） | 地址 | Address | Alamat | Dirección |
- `arb.more` 目前 8 個語系都缺，按鈕會直接顯示 key 名稱。其他語系：zh-CN 加载更多、ja さらに読み込む、ko 더 보기、vi Tải thêm。
- 單數：用 `Intl.PluralRules(locale).select(n) === "one"` 去選 `nTx_one`，或者改用 ICU 的 `{n, plural, one {# tx} other {# txs}}`。中文、ms 不分單複數。
- ja / ko / vi / zh-CN 照同樣的意思補齊。不要加說明文字或英文翻譯行。

## 7. Feed 需要的欄位
```jsonc
{
  "stats": { "...": "（現有 24h 數字）",
    "byChain": { "56": { "count": 9, "kept": 286.10, "gross": 289.43, "gas": 0.32, "txs": 742118 } } },  // D2 的環和每鏈列
  "today": {
    "tz": "Asia/Taipei",
    "start": 1761494400,          // 當地今天 00:00（unix 秒）
    "now": 1761536963,            // 伺服器現在時間，用來決定「現在」線和未來淡化，不要用使用者的時鐘
    "trades": [                   // 今天全部的公開紀錄（kept ≥ 5 USD 門檻後），依 ts 排序
      { "ts": 1761524903, "chain": 56, "kept": 240.64, "gross": 241.12, "gas": 0.48, "tx": "0x…" }
    ]
  }
}
```
- **增量輪詢**：`GET …?since=<最後一筆 ts>`，只回傳新增的 `today.trades`，加上最新的 `stats` 和 `now`。前端用新增的筆數決定播哪一顆點的飛入動畫，以及 D2 哪一段要長。換日時（`start` 改變），前端清空 trades 重新載入。
- 列表（最新 / 前 100）的 API 不變。今日套利**不能**從列表推算，因為列表最多 100 筆。
- `today.trades` 可能有數百筆，每筆約 80 bytes，可以接受。超過 150 筆時前端會切到第 3 節的退路畫法，資料不用改。

## 8. QA 清單
- 390 / 360 × zh-TW / en / ms / es：沒有截斷，只有第 4.3 節列出的換行。
- 選中的橘色 chip 上，12 個單色 logo 都清楚。
- 全 0、很少筆、超過 150 筆、載入中、錯誤、沒有紀錄的鏈，這些狀態都要能顯示。
- reduced motion：沒有任何動畫。分頁隱藏時，rAF 和 canvas 都停止。
- 5 秒更新時只動差異：列表插一筆、D2 一段、C 一顆點，其他元素不重播動畫。

---

## 附錄：沒有採用的方案（只供參考）
完整的舊規格在 `spec-archive-v1-v4.md`，mockup 仍然可以用參數切換。
- 摘要卡：A 每鏈橫條、B 里程表加小時條、C 占比堆疊條、D0 原版環、D1 雷達掃描、D3 霓虹描線、D4 3D 玻璃（`sum=a|b|c|d0|d1|d3|d4`）。
- 今日套利：A 柱加累計線、B K 線（K 線不採用：每筆都是正的，畫出來會像樓梯，也容易讓人以為是價格）、D 24h 時鐘、E 累計曲線加里程碑、F 鏈堆疊柱（`chart=a|b|d|e|f`）。
- 選中 chip 上的 logo 改法：A 彩色原樣、B 彩色加深色圈（`chain-logos/legibility-sheet@2x.png`）。