Finance
Production：src/components/AssetPrediction/source/AssetPredictionPage/AssetPredictionPage.tsx
Installation
import { AssetPredictionPage } from "@/components/product/asset-prediction-page/asset-prediction-page";Page
Implementation Notes
2026-08-17：這頁不再是獨立的 Asset Prediction 頁， 它併進了 Finance 這個分類，用標題右邊的 Markets / Assets 兩顆切換讀法。 組件名 AssetPredictionPage 沒有跟著改 —— 它是這條產品線的名字， 改名要動 import 鏈與所有 preview / demo route，不在這一輪的範圍。
重組自 ../opinion-labs-archive/prototypes/assets-forecasting/all-assets-5s-test-b.html。 原型是 standalone HTML 全手刻；這一版凡是 production 有的一律換成真組件。
用了哪些真組件
| 頁面上的東西 | 組件 |
|---|---|
| 左欄 Browse assets | Navigation（@olab）—— /sports 左欄同一顆 |
| 手機版分類 / 搜尋 / 排序（lg 以下） | 照 production /trending 的開場：搜尋框置頂（Input @olab）→ sticky 純文字分類捲動列（AssetMobileCategoryBar，本 repo，同 /sports 頂列）→ 排序收成 ↑↓ icon 釘在分類列右端（ButtonUtility + Dropdown）。中途做過 Tabs 版，2026-07-29 同日被最終裁決取代 |
| 搜尋框 | Input（@olab） |
| 排序下拉 | Select（@olab） |
| 資產表格 | AssetRow / AssetRowHeader（本 repo，自 @olab Table 抽出） |
| Trending 卡外殼 | Card（@olab，hoverEnabled） |
| Trending 卡內的價格時間軸 | AssetPriceTimeline（本 repo）；系列清單是 Popover + Button（@olab） |
| 收藏星 | WatchlistButton（本 repo，等同 production Star） |
| 前往 dashboard 的 hover 提示 | Tooltip（@olab） |
| 全部文字 | H1 / H3 / MediumText / SmallText（@olab Typography） |
| 全部版面 | Stack / Inline（@olab Layout） |
production 有、但這個 repo 拿不到的
以下組件住在 Ethan 的 app repo（src/components/*、src/app/*），不在 @olab/components， 本 repo 只 vendor 了 @olab。所以它們刻意缺席，不重新發明：
Header/Footer/HomeTopSift—— 頁面 chrome。這一版沒有 nav bar 與 footer， 接進真站時直接用 production 的。Star→ 用本 repo 的WatchlistButton代打。MiniLineChart→ 用AssetSparkline在本 repo 重做一份：同一個庫（recharts）、 同樣的LineChart+Line結構， 顏色全走 token。多一條標記期初值的虛線基準。NoDataFound/KMNumber/Pagination資料層 —— 空狀態用純文字，數字是預先格式化字串。
Trending 卡的 Asset price timeline（N1）—— 已完成
原型卡片裡那條「歷史線 + 未來 market 標記 + 時間帶 hover + chip + preview + 系列清單」 是整份稿子最大的一塊新組件，已獨立做成 AssetPriceTimeline（見 它自己的 preview 頁），這一版的 trending 卡用的就是它，五個子部件都在。
- 引擎照 production 的
MultiTopicChart走 recharts， 線與記號一律 brand（同一資產的價格沒有極性），grid / today / band 走中性 data token。 - 沒有市場預期價的 market 一律不畫、不進清單、不算數量—— awaiting liquidity 是常態不是邊緣案例。
- x 軸是分段線性（today 固定在 40%），不能拿來量斜率。
- 跨卡互斥：同時只允許一個 preview 開著，兩張卡並排也不會同時展開。 所以卡片這一層要擋掉冒泡，點時間軸不會誤觸整卡的 View Dashboard。