// ========================================================================== // Components / Data Display 家族 — thumbnails + detail pages // ========================================================================== const { Demo: __Demo_d, DocCard: __DocCard_d, Bar: __Bar_d, Spinner: __Spinner_d } = window; const Demo = __Demo_d, DocCard = __DocCard_d, Bar = __Bar_d, Spinner = __Spinner_d; // ---------- Thumbnails ---------- const T_Avatar = () => (
{["A", "B", "C"].map((l, i) =>
{l}
)}
); const T_Badge = () => (
); const T_Chip = () => (
{[0, 1].map(i =>
×
)}
); const T_Tag = () => (
); const T_Divider = () => (
); const T_Icons = () => (
{["home", "heart", "star", "bell", "mail", "user", "cal", "set"].map(n => )}
); const T_List = () => (
); const T_Table = () => (
{[0, 1].map(r =>
)}
); const T_Tooltip = () => (
Tooltip
); const T_Popover = () => (
); const T_Typography = () => (
Material UI Material UI Material UI
); const T_Carousel = () => (
{[0, 1, 2].map(i => )}
); const T_Accordion = () => (
); const T_Card = () => (
); const T_Paper = () => (
{[12, 8, 4, 0].map((d, i) =>
)}
); const T_Calendar = () => (
{Array.from({ length: 21 }).map((_, i) =>
)}
); const T_Empty = () => (
404
); const T_QRCode = () => (
{Array.from({ length: 49 }).map((_, i) => { const on = [0, 1, 2, 3, 6, 8, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 33, 34, 38, 40, 42, 43, 44, 45, 46, 48].includes(i); return
; })}
); // ========================================================================== // Detail Cards // ========================================================================== const DocDisplay = () => ( <> {[24, 32, 40, 56].map(s => A)} L B C D
{["#2492ff", "#1fa101", "#faad14", "#a855f7", "#e8178a"].map((c, i) => (
{"ABCDE"[i]}
))}
+12
 預設 成功 警示 錯誤 L 林小明 Default Success Warning Error Default Blue Green Red
以上為基本資料
以下為進階設定
或使用社群帳號登入
編輯
分享
刪除
{[16, 20, 24, 32].map(s => (
{s}px
))}
{["check", "plus", "x", "search", "edit", "trash", "info", "warn", "err", "ok", "bell", "user", "home", "menu", "star", "heart", "set", "upload", "download", "eye", "cal", "mail", "file", "folder", "grid", "list", "filter", "refresh", "lock", "link"].map(n =>
{n}
)}
Title 1 / 主頁標題
Title 2 / 主頁標題
Headline / 區塊標題
Body 1 / 一般內文
Body 2 / 輔助文字
Caption / 註釋
{[ { l: "資產總數", v: "1,284", d: "+24 本週", c: "var(--success)" }, { l: "活躍成員", v: "32", d: "+3 本週", c: "var(--success)" }, { l: "錯誤回報", v: "3", d: "+1 本週", c: "var(--error)" }, ].map((c, i) => (
{c.l}
{c.v}
{c.d}
))}
{[0, 1].map(i => (
{["品牌識別系統", "App Onboarding"][i]}
{["設計團隊正在進行的專案", "重新設計新使用者首次體驗"][i]}
))}
{[1, 2, 3, 4].map(s => (
Shadow {s}
))}
404
找不到此頁面
頁面可能已被移除或網址有誤。
回到首頁
掃描以開啟設計系統
https://example.com/design-system
下載 QR Code
); // ---------- 小型 demo 元件 ---------- const AvatarChar = ({ size = 40, color, rounded = "50%", children }) => (
{children}
); const BadgeOn = ({ n, dot, color = "var(--error)", children }) => (
{children} {dot ? null : n}
); const ChipFn = ({ label }) => ( {label} ); const ChipRemovable = () => { const [chips, setChips] = React.useState(["Design", "System", "UX", "Branding"]); return (
{chips.map(c => ( {c} setChips(chips.filter(x => x !== c))} style={{ width: 18, height: 18, borderRadius: "50%", background: "var(--blue-200)", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}> ))} {chips.length === 0 && 已全部移除}
); }; const TagSpan = ({ c, bg, border, children }) => ( {children} ); const ListBasic = () => (
{["儀表板", "專案", "成員", "設定"].map((t, i) => (
{t}
))}
); const ListWithAvatar = () => (
{[ { n: "林小明", e: "ming@example.com", c: "#2492ff" }, { n: "陳大華", e: "dahua@example.com", c: "#1fa101" }, { n: "王美玲", e: "meiling@example.com", c: "#e8178a" }, ].map((u, i) => (
{u.n[0]}
{u.n}
{u.e}
追蹤
))}
); const TableBasic = () => (
{["名稱", "狀態", "擁有者", "更新時間"].map(h => ( ))} {[ ["品牌資產 A.png", "success", "已完成", "Alice", "2 小時前"], ["設計稿 V2.fig", "warn", "處理中", "Bob", "昨天"], ["合約_2024.pdf", "error", "失敗", "Cathy", "3 天前"], ].map((r, i) => ( ))}
{h}
{r[0]} {r[2]} {r[3]} {r[4]}
); const TooltipBtn = ({ label, tip, danger }) => { const [show, setShow] = React.useState(false); const color = danger ? "var(--error)" : "var(--n-900)"; return ( setShow(true)} onMouseLeave={() => setShow(false)}> {label} {show && ( {tip} )} ); }; const PopoverBasic = () => { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { const fn = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", fn); return () => document.removeEventListener("mousedown", fn); }, []); return (
setOpen(!open)} icon="set">操作選單 {open && (
編輯
複製
分享連結
刪除
)}
); }; const CarouselDemo = () => { const [idx, setIdx] = React.useState(0); const slides = [ { c: "linear-gradient(135deg,var(--blue-400),var(--blue-700))", t: "歡迎使用設計系統 V1.0" }, { c: "linear-gradient(135deg,#f59e0b,#e43131)", t: "全新色彩與字級階層" }, { c: "linear-gradient(135deg,#1fa101,#0ea5e9)", t: "10 大基礎 + 60+ 元件" }, ]; return (
{slides[idx].t}
{slides.map((_, i) => ( setIdx(i)} style={{ width: i === idx ? 24 : 8, height: 8, borderRadius: 999, background: i === idx ? "var(--blue-500)" : "var(--n-300)", cursor: "pointer", transition: "all var(--dur-fast) var(--ease)" }} /> ))}
); }; const CalendarMonth = () => (
2026 年 4 月
{["日", "一", "二", "三", "四", "五", "六"].map(d =>
{d}
)}
{Array.from({ length: 30 }, (_, i) => i + 1).map(n => { const events = [5, 12, 18, 22, 25].includes(n); return (
{n}
{events &&
}
); })}
); const EmptyState = ({ icon, title, desc, cta, outline }) => (
{title}
{desc}
{cta}
); const QRBox = ({ size = 140, withLogo }) => (
{Array.from({ length: 441 }).map((_, i) => { const r = i % 21, c = Math.floor(i / 21); const inFinder = (r < 7 && c < 7) || (r > 13 && c < 7) || (r < 7 && c > 13); const seed = (r * 31 + c * 17) % 100; const on = inFinder ? !((r > 0 && r < 6 && c > 0 && c < 6) && !(r > 1 && r < 5 && c > 1 && c < 5)) : seed > 55; return
; })}
{withLogo && (
D
)}
); Object.assign(window, { T_Avatar, T_Badge, T_Chip, T_Tag, T_Divider, T_Icons, T_List, T_Table, T_Tooltip, T_Popover, T_Typography, T_Carousel, T_Accordion, T_Card, T_Paper, T_Calendar, T_Empty, T_QRCode, DocDisplay, });