# CG Scan — Crypto Dashboard Redesign 設計規格（Design Spec）｜ 方向 A

> 版本：v1.1（2026-08-27）｜ **方向：A — Bloomberg Terminal / TradingView Pro 專業交易終端**
> 對應專案：`heatmap`（cgscan）repo＝`github.com/jm9h5z47tm-dev/heatmap`，本機 `/opt/heatmap/repo`（分支 v4）
> Function list 基準：`cgscan/*.py` API routes + `README.md 功能總覽` + `CHANGELOG.md`
> 視覺樣本：`/root/Cgscan/design-A.html`（高保真 mock，可開瀏覽器直接看）

> ⚠️ **本文件重點：現有 v4 已是「OLED 深黑 + Glassmorphism 玻璃卡 + Fira + 7 分頁」。方向 A 是**改掉這一整組視覺語言**，換成 Bloomberg/TradingView 交易終端風。**

---

## 1. 目標（這套方向的「新」在哪）

方向 A 不是換 token，是**換整套視覺語言**。核心主張：

1. **剩餘價值＝「資訊密度 + 專業感」**：從「深黑玻璃卡 + 較多留白」轉為「**steel-slate 深藍灰 + 平面實心面板 + 高密度緊網格 + 等寬數字優先**」。
2. **保留「資料誠實性」與「推薦優先」兩大功能主軸**（src/freq/unit/live 資料身分護照、AI 決策/交易計劃為主角），但用**終端語彙**呈現。
3. **不改後端 / AI / 登入 / 配額 / i18n**；只做視覺與版面。

---

## 2. 設計系統（Direction A）

### 2.1 風格 Style
- **Bloomberg / TradingView Pro 交易終端**：冷深藍灰、等寬數字、flat 面板、1px 邊框、資訊密度高、terminal 感。
- **捨棄 glassmorphism**（無玻璃模糊/反光）、**捨棄大圓角**（radius 2-4px）、無強陰影。

### 2.2 配色 Palette

| Token | 值 | 用途 | vs 現有 v4 |
|---|---|---|---|
| `--bg` | `#0A0E1A` | 終端底色 | 現 `#020617`（更純黑）→ 改冷深藍灰 |
| `--panel` | `#0F1723` | 面板 | 現 `#0E1223` |
| `--panel2` | `#141F33` | 內層/hover | 新增 |
| `--line` | `#1D2A3F` | 邊框 | 現 `#334155` |
| `--line2` | `#2C3C58` | 邊框強 | 新增 |
| `--text` | `#DCE6F2` | 主文字 | 現 `#F8FAFC` |
| `--muted` | `#8A9BB2` | 次要 | 現 `#94A3B8` |
| `--dim` | `#52637C` | 三級/表頭 | 新增 |
| `--accent` | `#2E6BE6` | 主色（藍，TradingView 感） | 現 accent `#22C55E`（綠）→ **改藍** |
| `--accent2` | `#4F8CFF` | 主色亮 | 新增 |
| `--up` | `#2EBD85` | 漲/正向 | 現 `#22C55E` |
| `--down` | `#F6485D` | 跌/負向 | 現 `#EF4444` |
| `--warn` | `#F5A623` | 預警 | 現 `#F59E0B` |
| `--cyan` | `#3FD2FF` | 資訊/即時 | 新增 |
| `--violet` | `#8B7CFF` | 頻率 badge | 新增 |

> **不變語意**：綠=漲/正、紅=跌/負。色只輔助，必配 +/-/▲▼。資料源 badge 色：Coinglass 青、OKX 黃、LSR 紫。

### 2.3 字體 Typography
- **等寬優先**（數字/代碼/表/價格）：`ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Consolas`。
- **內文**：`-apple-system, "Segoe UI", Roboto, "Helvetica Neue", 繁中後備`。
- 表頭、標籤用 **uppercase mono 小字**（terminal 感）。

### 2.4 元件語彙
- **面板＝window**：每面板是「標題列 + 內文」；標題列帶資料源 badge（`src·freq`），右下 status 可放狀態。
- **表**：compact、sticky 表頭、hover 高亮、`tabular-nums`；可排序、分頁。
- **狀態燈/徽標**：方形小 chip（`.state`），語意不只靠顏色。
- **快捷鍵提示**：menu bar 每項帶 `[1]~[7]`、status bar 帶 `TAB`/`⌘K`。

### 2.5 動效
- 極簡：hover 過渡 120ms、狀態燈 dot 脈動、展開/收合 chevron。`prefers-reduced-motion` 生效。

### 2.6 反模式
- ❌ glassmorphism/玻璃模糊 ❌ 大圓角/強陰影 ❌ 淺色 ❌ emoji 當 icon（用 SVG）❌ 只靠顏色 ❌ focus ring 移除

---

## 3. 資訊架構（IA）

### 3.1 全球外殼（Terminal Shell）
```
┌────────────────────────────────────────────────────────┐
│ TITLE BAR (34px)  ● ● ●  CG SCAN · PERP·FUTURES TERM.   │  樑窗
│                   時鐘 · MD · admin · ⌘K                 │
├────────────────────────────────────────────────────────┤
│ MENU BAR (30px)  [1]全場掃描 [2]工作台 [3]LSR [4]PB      │  快捷鍵
│                  [5]計劃 [6]K線 [7]研究 · MD/ENGINE      │
├────────────────────────────────────────────────────────┤
│ TICKER (30px)  BTC▲% ETH▲% SOL▼% OI Funding LSR LIQ LIVE│
├──────────────────────────────┬─────────────────────────┤
│ LEFT RAIL (236px)            │ MAIN VIEW (fill, 內部scroll)│
│ MODULES / WATCHLIST / 資料護照 │  面板 window 網格           │
├──────────────────────────────┴─────────────────────────┤
│ STATUS BAR (26px)  ●READY 資料源 最後更新 下次刷新        │
│                    TAB/⌘K/1-7                            │
└────────────────────────────────────────────────────────┘
```

### 3.2 主模組導覽（同一 function list）
`scan`（Updated Data 門面）· `work`（16 層 + 推薦）· `lsr` · `powerbar`（推薦）· `plan`（推薦）· `kline`（Updated Data）· `research`（推薦）+ 全域（watchlist/alerts/journal/calc/brief/auth-admin）。

### 3.3 IA Map / 下鑽（同 v1.0 §3.3，視覺語彙換成終端）。

---

## 4. 核心設計模式（沿用、換語彙）

### 4.1 Updated Data 模式（資料身分護照 `src-badge`）
每面板標題列 + 每資料行標 `src·freq·unit·live·誠實降級`。
- `.src`（Coinglass 青 / OKX 黃 / LSR 紫）+ `.freq`（5s/60s/300s）+ 單位 + `●live`。
- 缺資料顯示 `—`/`null`（非 0）。P0-3 頂部 ticker 接真實資料或標「（模擬）」。
- status bar 顯示資料源合規 + 最後更新 + 下次刷新。

### 4.2 Recommendation 模式（推薦主角）
- **工作台右欄 AI 決策卡**：方向大字（▲看多/▼看空）+ 信心 bar + 進場/TP/SL 三格 + 理由分層（資料層/推理層/風險閘）+ CTA（生成計劃/倉位計算/分享/完整理由）。
- **Power-Bar 訊號**：狀態燈（🟢買入/👀觀察/🟡過期/⚪無）+ 大力柱→半量柱 + 4H 趨勢 + 訊號建議價 + 免責（統計訊號非保證）。
- **交易計劃**：訊號計分（6 維）→ 綜合分 → 做多/做空雙欄（低/中/高層級）。

---

## 5. 各視圖規格（對應 function list，語彙＝方向 A）

### 5-1 全場掃描 `scan`
- 頂部 4 統計格（全場 70 幣 / 24h 額 / OI / 風險鿁 4/10）。
- 面板 window 網格：費率極端做多 TOP5、做空 TOP5（Coinglass·300s）、漲跌榜（OKX·5s）。
- 底部全場資料表（可排序分頁）。誠實統計 `70 = +40 / -30`。

### 5-2 幣種工作台 `work`
- 左資料層堆疊（16 層 accordion，點擊才載入省配額）+ 右 AI 決策卡（推薦主角）。
- 概覽卡 mini grid：價格 / 24h / OI / 費率（帶 src·freq）＋ 期現基差 / 資金流向 / 突破 / 情緒層等。

### 5-3 LSR 分析 `lsr`
- 面板：KOL 共識量化表 / APR 套利排行 / 多空比波動（升/降雙榜 1h/4h）+ sparkline，點擊才載入。

### 5-4 Power-Bar 訊號 `powerbar`（推薦）
- 訊號表（20 幣清單，5min 刷新）：狀態 / 15m / 5m / 大力柱 / 半量柱 / 訊號建議 / 4H 趨勢。
- 統計格：買入訊號 / 觀察中 / 無訊號 / next 掃描，`✳強制重掃`，`⏱5min·OKX 免費`。

### 5-5 交易計劃 `plan`（推薦 4-skill）
- 輸入（幣種/方向/時框/最大虧損/槓桿）→ 生成。訊號計分（6 維）→ 做多/做空雙欄。反向降信心並標註。免責。

### 5-6 K線分析 `kline`（Updated Data 4-skill）
- 指標摘要表（RSI/MACD/EMA/BB/KDJ/SuperT）+ 3 支柱複合評分 + 訂單流（delta/CVD）。互動 K 線（lightweight-charts）語意不靠色。

### 5-7 研究報告 `research`（推薦 4-skill）
- 快照卡（行情/BTC 對比/市值/ATH/ATL/7d-30d-1y/RSI/BB/費率/OI/新聞）+ 完整報告（綠旗/紅旗/風險評級/各維度解讀）。

### 5-8 用戶全域（跨視圖）
- Watchlist ★ / 價位提醒 🔔 / 交易日記 📓 / 倉位計算 🧮 / Morning Brief 🌅 / 登入-審核-admin 後台 / i18n 繁簡。

---

## 6. 元件庫（Component Library）

| 元件 | 規格（方向 A 語彙） | 資料身分 |
|---|---|---|
| `titlebar`/`menubar`/`statusbar` | 終端窗框、快捷鍵、狀態 | — |
| `panel`（window） | flat、1px border、radius 2-3px、標題列+內文 | 標題列帶 src |
| `src-badge` | `.src` 青/黃/紫 + `.freq` + unit + `●live` | Coinglass/OKX/LSR |
| `stat` | 大 mono 數字 + 標籤 + 來源 | 5s/60s/300s |
| `data-table` | compact、sticky 表頭、可排序分頁 | 列帶 src |
| `ai-decision-card` | 方向大字 + 信心 bar + 進場/TP/SL + 理由分層 + CTA | DeepSeek/Qwen |
| `signal-table` | 狀態燈 + 上下文 + 價位來源 | OKX |
| `kline-chart` | lightweight-charts，語意不靠色 | OKX |
| `chip/badge` | 可換行不裁切，+n 展開 | — |

---

## 7. 響應式斷點

| 斷點 | 行為 |
|---|---|
| 1440px | 4 欄統計；左資料/右推薦 1fr/400px；多面板並排 |
| 1024px | 2 欄統計；面板 2 欄；rail 收合 |
| 768px | 1 欄面板；工作台上下堆疊；rail 隱藏 |
| 375px | 單欄；menu 只留 icon+快捷鍵；status 收合 |

原則：桌面一屏不滾動（內部 overflow）；手機內部 scroll；無橫向溢出；`prefers-reduced-motion`。

---

## 8. 無障礙與品質

- 對比 ≥ 4.5:1；Focus 可見；鍵盤可導航（`1-7` 切模組、`TAB` 循環、`⌘K` 搜尋）。
- 圖表語意不只靠色（K線 filled/hollow、序列直接標籤）。
- 元圖示 SVG（Heroicons/Lucide），不用 emoji 當 icon。
- text/chip/badge 可換行不裁切；長 identifier 安全換行；hover 120ms。

---

## 9. 驗收準則

1. 全站為方向 A 語彙：steel-slate + flat 面板 + 無玻璃 + mono-first（抽樣比對現 v4）。
2. 單一主色改為藍（`--accent #2E6BE6`），綠=漲紅=跌語意不變。
3. 每面板/表/圖有資料身分護照（src·freq·unit·live·誠實降級）。
4. 推薦為主角：工作台 AI 決策卡、powerbar 訊號表、plan 雙欄，具方向+信心+進場/TP/SL+理由分層。
5. P0 誠實性修正（ticker 真實或標模擬；爆針防護/verdict 色）。
6. 對比/focus/語意不只靠色/`prefers-reduced-motion` 生效。
7. 無回歸：全場掃描/工作台/LSR/PowerBar/AI 分析/登入/i18n/配額正常。
8. 差異僅在 `v4`；`master` 未動；UAT 驗收後才佈署 prod。

---

## 10. 範圍邊界

- **In scope**：視覺語言整體切換至方向 A（配色/字體/元件語彙/版面）、資料身分護照一致化、P0 誠實性、無障礙、響應式、7+全域模組導覽。
- **Out of scope**：後端變更、AI 計算變更、新功能模組（除 4-skill 分頁）、配額/登入邏輯改動。
- 配套文件：`wireframe.md`（方向 A 低擬真藍圖）、`design-A.html`（高保真視覺樣本）。

> ⚠️ 本專案僅供技術研究與學習，**不構成投資建議**。