# CG Scan — Crypto Dashboard Redesign Wireframe（低擬真藍圖）｜ 方向 A > 版本：v1.1（2026-08-27）｜ **方向：A — Bloomberg / TradingView Pro 交易終端** > 對應：`design-spec.md`（v1.1）· 視覺樣本 `design-A.html` > Function list 藍本：`heatmap` repo（cgscan）API routes > 語彙：steel-slate 深藍灰 + flat 面板 + mono-first + 無玻璃 + 高密度 --- ## 0. 圖例 ``` ┌─────────────┐ 方框 = 面板 window [ ] 輸入/欄位 ⊕ 搜尋 │ 標題列 .src │ ── 分隔線 ▓▓▓▓ 圖表/圖形占位 ● 狀態燈 ├─────────────┤ ▸ 頁籤/折疊 [▪▪▪] 資料表 badge src·freq │ body 內容 │ ▣ 按鈕/CTA ▲▼ 排序/篩選 └─────────────┘ [n] 快捷鍵 <-> 可互動/連結 ``` - 語意色：綠=漲/正、紅=跌/負。資料身分護照 `·src(青/黃/紫)·freq·unit·●live·誠實—`。 - **與現有 v4 差異**：現為 OLED 深黑+玻璃卡+Fira+圓角；方向 A 改 steel-slate+flat+mono-first+小圓角+藍主色。 --- ## 1. 全球外殼（Terminal Shell） ``` ┌──────────────────────────────────────────────────────────────────────────┐ │ TITLE BAR (34px) │ │ ● ● ● CG SCAN · PERP·FUTURES TERMINAL ⏱14:32:15 MD admin ⌘K │ ├──────────────────────────────────────────────────────────────────────────┤ │ MENU BAR (30px) [1]全場掃描 [2]工作台 [3]LSR [4]PB [5]計劃 [6]K線 [7]研究 │ │ MD: ENABLED · ENGINE: DeepSeek v4-pro · DRY-RUN │ ├──────────────────────────────────────────────────────────────────────────┤ │ TICKER (30px) ● BTC$64,142▲1.2% │ETH▲0.8% │SOL▼2.1% │OI │Funding │LSR │LIQ│ ├──────────────────────────────┬───────────────────────────────────────────┤ │ LEFT RAIL (236px) │ MAIN VIEW（fill · 內部 scroll） │ │ MODULES │ ┌panel┐ ┌panel┐ ┌panel┐ │ │ [scan][work][lsr][pb]... │ │stat │ │stat │ │stat │ │ │ WATCHLIST ★ BTC/ONT/ETH │ └─────┘ └─────┘ └─────┘ │ │ 資料身分護照 說明 │ ┌panel 全場資料表 (sort/pager)┐ │ ├──────────────────────────────┴───────────────────────────────────────────┤ │ STATUS BAR (26px) ●READY ⚠僅供研究 資料源 Coinglass·OKX·LSR │ │ 最後更新 14:32:15 · 下次刷新 45s [TAB]循環 [1-7]切 [⌘K]搜尋 │ └──────────────────────────────────────────────────────────────────────────┘ ``` --- ## 2. 七大主視圖 Wireframes（方向 A 語彙） ### 2-1 全場掃描 `scan`（Updated Data 門面） ``` ┌─stat────┐ ┌─stat────┐ ┌─stat────┐ ┌─stat────┐ │全場 70 │ │24h $1,635億│ │OI $28.4B│ │風險 4/10│ │+40/-30 │ │ │ │ │ │(warn) │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ ┌panel 費率極端·做多TOP5 ·src{青}COINGLASS·300s─┐ ┌panel 費率極端·做空TOP5 ·src{青}·300s─┐ │# 幣 費率 風險 OI │ │# 幣 費率 風險 OI │ │1 ONT 0.045% 4/10 $12M │ │1 ABC -0.041% 6/10 $6M │ │2 XYZ 0.038% 3/10 $8M │ │2 SOL -0.019% 5/10 $1.1B │ └───────────────────────────────────────────────┘ └────────────────────────────────┘ ┌panel 漲跌榜·全場SWAP ·src{黃}OKX·5s───────────────────────────────────────┐ │# 幣 現價 24h 成交額 OI │ │1 ONT $0.0602 +39.4% $45M $12M ▲▼ 排序 │ └───────────────────────────────────────────────────────────────────────────┘ 統計 70=+40/-30(一致) ▪ 最後更新 ▪ countdown ``` ### 2-2 幣種工作台 `work`（左數據 / 右推薦） ``` ┌─── 左：16 層資料（accordion，點擊才載入省配額）────────┬─── 右：AI 推薦 ───┐ │ panel ONT-USDT-SWAP ·src{青}COINGLASS·60s ·src{黃}OKX·5s│ decision 卡 │ │ ┌mini┐ ┌mini┐ ┌mini┐ ┌mini┐ │ ▲ 看多 (long) │ │ │價格 │ │24h │ │OI │ │費率│ │ 信心 ▓▓▓ 72 │ │ │0.06 │ │+39%│ │$12M│ │0.045%│ │ 進場/TP/SL 三格 │ │ └────┘ └────┘ └────┘ └────┘ │ 0.060/0.065/0.058│ │ ▸ 資金流向 CVD ·src{青}·60s │ 理由分層(資料/推理/ │ │ ▸ 情緒層 LSR大戶 ·src{紫}·click │ 風險) 逐條 │ │ ▸ 突破/假突破 ·src{黃}·15s (📈向上,vol2.1×,wick12%) │ ▣生成計劃 ▣倉位 ▣分享│ │ ▸ 橫盤/擠壓 │ └──────────────┘ │ └───────────────────────────────────────────────────────┴────────────────────┘ ``` ### 2-3 LSR 分析 `lsr`（Updated Data，點擊才載入） ``` ┌panel KOL 共識(量化) ·src{紫}LSR·click─┐ ┌panel APR 套利排行 ·src{紫}·click─┐ │ 5主流幣 × 5 KOL 量化共識表 │ │ 全場套利排行表 │ └──────────────────────────────────────┘ └────────────────────────────────┘ ┌panel 多空比波動 ▸[1h][4h] 升/降雙榜 ·src{紫}·click──────┐ │ ▲升TOP5 ▼降TOP5 · ▣[資金費率/多空比] sparkline │ └────────────────────────────────────────────────────────┘ ``` ### 2-4 Power-Bar 訊號 `powerbar`（推薦） ``` ┌panel Power-Bar 訊號 ·src{黃}OKX·5min ▣✳強制重掃─────────────────────┐ │ 幣 狀態 15m 5m 大力柱 半量柱 訊號建議 4H │ │ ONT 🟢買入訊號 BUY BUY 2.4× 1.0× 進場0.060·SL0.058·TP0.065 📈多 │ │ XYZ 👀觀察中 — BUY 1.8× 0.8× 等縮量(vol=median82%) ⚠逆勢 │ │ BTC ⚪無訊號 — — 0.6× — — 📈多 │ └──────────────────────────────────────────────────────────────────────┘ ┌stat 買入1┐ ┌stat 觀察4┐ ┌stat 無訊號15┐ ┌stat next掃描⏳142s┐ └──────────┘ └──────────┘ └─────────────┘ └──────────────────┘ 免責：統計訊號非保證 · 勝率33-58% · 每筆+0.5~1.6%(扣0.2%費) ``` ### 2-5 交易計劃 `plan`（推薦 4-skill） ``` ┌ 輸入 ────────────────────────────────────────────────┐ │ ONT-USDT-SWAP · 永續 · 看多 · 中線1-7d · 最大虧損5% │ │ 最大槓桿5x · 單筆上限10% ▣生成（計配額） │ ├──────────────────────────────────────────────────────┤ │ 訊號計分(6維): OI20% 多空比20% 費率15% 清算15% 大戶15% │ │ OKX15% → 綜合 +35 (▲偏多) 市場環境 偏多 ▲ (n/6維) │ ├───────────────────┬──────────────────────────────────┤ │ ▲做多計劃 │ ▼做空計劃（反向·自信降低） │ │ 低: 入場0.058-0.062│ 低: 入場— 損— TP— TP— │ │ 損0.052 TP1.070│ │ │ TP2.075 5%×2x│ │ │ 中: 入場... │ 中: 入場... │ │ 高: 入場... │ 高: 入場... │ ├───────────────────┴──────────────────────────────────┤ │ 風險評級4/10 ▾失效條件 ▸免責（訊號極端→反向降信心標註） │ └──────────────────────────────────────────────────────┘ ``` ### 2-6 K線分析 `kline`（Updated Data 4-skill） ``` ┌ 輸入 ONT-USDT-SWAP · 週期[15m|1H|4H|1D] ▣重新載入 ─────────────────────┐ │ ┌panel 指標摘要──┐ ┌panel 3支柱複合評分─┐ ┌panel 訂單流─┐ │ │ │ RSI MACD EMA │ │ 宏觀30+量價70→72 │ │ delta CVD │ │ │ │ BB KDJ SuperT │ │ 傾向偏多 ▲ │ │ 買賣牆 │ │ │ └────────────────┘ └───────────────────┘ └────────────┘ │ │ ┌panel K線圖（lightweight-charts·互動·語意不靠色 filled/hollow）────┐ │ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ │ └────────────────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────────────────┘ ``` ### 2-7 研究報告 `research`（推薦 4-skill） ``` ┌ 輸入 ONT-USDT-SWAP ▣[快照(秒級)] ▣[完整報告(LLM 10-30s,計配額)] ────────┐ │ ┌panel 快照卡───────────────────────────────────────┐ │ │ │ 行情(價/高低/量/價差) ▪BTC對比 ▪市值/排名/供給 │ │ │ │ ATH/ATL距離 ▪7d/30d/1y ▪RSI/MACD/EMA200/BB/SuperT │ │ │ │ 費率(閾值)/OI/盤口失衡 ▪CoinGecko/OKX news(空則—) │ │ │ └────────────────────────────────────────────────────┘ │ │ ┌panel 完整報告（LLM）────────────────────────────────┐ │ │ │ 🟢綠旗清單 🔴紅旗清單 ▪風險評級 低/中/高/極高 │ │ │ │ 各維度「所以呢」解讀 ▪免責「非投資建議」 │ │ │ └────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────┘ ``` --- ## 3. 共用元件庫（Component Library） | 元件 | 規格（方向 A） | 資料身分 | |---|---|---| | `titlebar/menubar/statusbar` | 終端窗框、快捷鍵 `[n]`、狀態列 | — | | `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 展開 · 語意不靠色 | — | --- ## 4. 導覽與 IA Map ``` CG Scan (Root) ├─ 全場掃描 scan ← 首屏（Updated Data 門面） ├─ 幣種工作台 work ← 16 層 + AI 推薦 ├─ LSR 分析 lsr ├─ Power-Bar 訊號 powerbar ← 推薦 ├─ 交易計劃 plan [推薦 4-skill] ├─ K線分析 kline [Updated Data 4-skill] ├─ 研究報告 research [推薦 4-skill] └─ 全域：Ticker+搜尋+用戶 + Watchlist★ + 價位提醒 + 交易日記 + 倉位計算 + Morning Brief + 登入/admin ``` 下鑽：`掃描候選卡 → work開啟 → AI分析 → 決策卡 → 分享`；`powerbar訊號卡 → plan生成 → 落地`. --- ## 5. 響應式斷點 | 斷點 | 行為 | |---|---| | 1440px | 4 欄統計 · 左資料/右推薦 1fr/400px · 多面板 | | 1024px | 2 欄統計 · 面板 2 欄 · rail 收合 | | 768px | 1 欄 · 工作台上下堆疊 · rail 隱藏 | | 375px | 單欄 · menu 只留 icon+快捷鍵 · status 收合 | 原則：桌面一屏不滾動（內部 overflow）；手機內部 scroll；無橫向溢出；`prefers-reduced-motion` 生效。 --- ## 6. 設計 Token 對照（方向 A） | Token | 值 | 用途 | |---|---|---| | `--bg` | `#0A0E1A` | 終端底色 | | `--panel` | `#0F1723` | 面板 | | `--panel2` | `#141F33` | 內層/hover | | `--line` | `#1D2A3F` | 邊框 | | `--line2` | `#2C3C58` | 邊框強 | | `--text` | `#DCE6F2` | 主文字 | | `--muted` | `#8A9BB2` | 次要 | | `--dim` | `#52637C` | 表頭/三級 | | `--accent` | `#2E6BE6` | 主色（藍） | | `--accent2` | `#4F8CFF` | 主色亮 | | `--up` | `#2EBD85` | 漲/正向 | | `--down` | `#F6485D` | 跌/負向 | | `--warn` | `#F5A623` | 預警 | | `--cyan` | `#3FD2FF` | 資訊/即時 | | `--violet` | `#8B7CFF` | 頻率 badge | | 字體數字 | ui-monospace / JetBrains Mono | 數字/代碼 | | 字體內文 | system sans | 內文/標題 | > **不變**：綠=漲/正、紅=跌/負。資料源 badge：Coinglass 青 / OKX 黃 / LSR 紫。 --- ## 7. 驗證 Checkpoint（Wireframe 通過後才開工） 1. 全球外殼、7+全域模組、共用元件、IA map、響應式為使用者確認版。 2. 視圖內容與既有 function list 對齊（無遺漏）；4-skill 視圖對齊 `cgscan-4skills-spec`。 3. 方向 A 語彙（steel-slate + flat + mono-first + 無玻璃 + 藍主色）＋updated data ＋ recommendation ＋ P0 誠實性已納入。 > 確認後 → 進入實作。視覺樣本：`/root/Cgscan/design-A.html`。 > ⚠️ 本專案僅供技術研究與學習，**不構成投資建議**。