UI 模式
JustHold 把互斥的產品篩選統一成一種樣式。圖表區間、分類類型、記帳類型、分批與歷史篩選，應該像同一個控制項，而不是每一頁各自發明一組 chip。
此頁是給讀者的公開分享點。實作細節見 justhold-ui-layout skill。
分段篩選
標準控制項是柔和軌道，選中項目用主色填滿。
| 部位 | 處理 |
|---|---|
| 軌道 | 淡 muted 底、緊湊內距、不加外框 |
| 未選項目 | muted 文字加預設外框；hover 時外框改為主色 |
| 選中項目 | 主色填滿與 primary-foreground 文字 |
| 尺寸 | 圖表區間用緊湊尺寸（30D / 90D / 全部）；類型與分批列用較大尺寸 |
你會在這些地方看到：
- 持倉績效區間 —
30D/90D/全部 - 持倉圖表分頁 — 配置／持有天期／全景
- Big Money 分類 — 存下／超支／投入／賣出
- Big Money 餘額走勢 —
7d/14d/30d/90d - 記帳類型與編輯類型
- 歷史類型篩選（含筆數）
- 分批與設定清單 — 未平倉／已賣出、持倉／已賣出
合計不是分頁。 分類甜甜圈中央（與表格頁尾）的金額是目前類型的加總，不是第五個篩選。
刻意不同的地方
這些不是產品篩選，所以維持自己的語彙：
| 表面 | 為何長得不一樣 |
|---|---|
持倉一覽 1D–Max | 市場區間用漲跌色，不是 chrome |
| 語系與主題切換 | 頁首 chrome，不是資料篩選 |
| 管理後台內容分頁 | CMS 工作區用底線 IA |
| 月曆金額列 | 僅顯示存下／超支／投入合計 |
重用
若你在其他產品對齊 JustHold，互斥選項（大約 2–7 個）請複製這套柔和軌道加主色選中。不要為同一件事再發明第二種選中態（浮起卡片、各自帶框的 chip）。
給實作者
這個 repo 的共用元件是 SegmentedControl（apps/web/components/segmented-control.tsx）：
layout="inline"— 依內容收合（圖表區間）layout="fill"— 等寬項目（類型、分批、歷史）size—xs/sm/md- 可選
count、href（設定連結）與title
落地頁 Big Money mock 使用同一個控制項，讓行銷 demo 與會員端一致。
日常版面與 shell 規則見 justhold-ui-layout。色盤與圓角見 justhold-design-tokens。