// ========================================================================== // Components / Navigation 家族 — thumbnails + detail pages // ========================================================================== const { Demo: __Demo_nv, DocCard: __DocCard_nv, Bar: __Bar_nv, Spinner: __Spinner_nv } = window; const Demo = __Demo_nv, DocCard = __DocCard_nv, Bar = __Bar_nv, Spinner = __Spinner_nv; const T_MenuBar = () => (
{[1, 1, 1].map((_, i) => )}
); const T_AppBar = () => (
); const T_BottomNav = () => (
{["home", "search", "bell", "user"].map((n, i) => )}
); const T_Breadcrumb = () => (
/ /
); const T_Drawer = () => (
); const T_Links = () => ( Link to install ); const T_Pagination = () => (
{[1, 2, 3, "…", 10].map((n, i) => {n} )}
); const T_SpeedDial = () => (
{[0, 1, 2].map(i =>
)}
); const T_Stepper = () => (
{[1, 2, 3].map((n, i) =>
{n}
{i < 2 &&
} )}
); const T_Tabs = () => (
); const T_Dropdown = () => (
); const T_Anchor = () => (
{[0, 1, 2, 3].map(i =>
{i === 1 &&
}
)}
); // ---------- Detail Cards ---------- const DocNav = () => ( <>
DesignSys
儀表板 專案成員設定
L
DesignSys
儀表板專案成員
{[{ n: "home", l: "首頁" }, { n: "search", l: "搜尋" }, { n: "heart", l: "收藏" }, { n: "user", l: "我的" }].map((t, i) => (
{t.l}
))}
首頁 專案 編輯
預設連結 已加底線 危險連結 禁用連結 下載文件 外部連結
{["基本資料", "通知設定", "安全性", "計費資訊", "API Token"].map((t, i) => (
{i === 1 &&
}
{t}
))}
); // ---------- demo helpers ---------- const MenuBarDemo = () => { const [open, setOpen] = React.useState(null); const items = [ { l: "檔案", sub: ["新增", "開啟", "儲存", "匯出"] }, { l: "編輯", sub: ["復原", "重做", "剪下", "貼上"] }, { l: "檢視", sub: ["放大", "縮小", "全螢幕"] }, { l: "說明", sub: ["關於", "使用指南"] }, ]; return (
setOpen(null)}> {items.map((it, i) => (
setOpen(i)} style={{ padding: "6px 14px", fontSize: 13, color: open === i ? "var(--blue-600)" : "var(--n-800)", background: open === i ? "var(--blue-50)" : "transparent", borderRadius: 4, cursor: "pointer" }}>{it.l}
{open === i && (
{it.sub.map(s =>
{s}
)}
)}
))}
); }; const DrawerDemo = ({ side }) => { const [open, setOpen] = React.useState(true); const w = 240; return (
setOpen(false)} style={{ position: "absolute", inset: 0, background: open ? "rgba(7,12,18,.4)" : "transparent", transition: "background var(--dur-base) var(--ease)" }} />
{side === "right" ? "細節" : "選單"}
setOpen(false)} />
{side === "right" ?

顯示項目的詳細資訊與編輯選項。

: ["儀表板", "專案", "成員", "設定"].map((t, i) => (
{t}
))}
setOpen(!open)}>{open ? "關閉" : "開啟"}抽屜
); }; const SpeedDialDemo = () => { const [open, setOpen] = React.useState(false); const actions = [{ n: "mail", l: "寄信" }, { n: "edit", l: "編輯" }, { n: "user", l: "新增成員" }]; return (
{open && actions.map(a => (
{a.l}
))}
setOpen(!open)} style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--blue-500)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", boxShadow: "0 6px 16px rgba(36,146,255,.4)", transition: "transform var(--dur-base) var(--ease)", transform: open ? "rotate(45deg)" : "rotate(0)" }}>
); }; const StepperHorizontal = () => { const [step, setStep] = React.useState(1); const labels = ["填寫資料", "驗證身分", "確認資料", "完成"]; return (
{labels.map((s, i) => (
setStep(i)} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
{i < step ? : i + 1}
{s}
{i < labels.length - 1 &&
} ))}
setStep(Math.max(0, step - 1))} disabled={step === 0}>上一步 setStep(Math.min(labels.length - 1, step + 1))} disabled={step === labels.length - 1}>下一步
); }; const StepperVertical = () => { const [step, setStep] = React.useState(1); const items = [ { t: "建立工作區", d: "輸入名稱與類型" }, { t: "邀請成員", d: "新增團隊成員" }, { t: "完成設定", d: "確認所有資訊" }, ]; return (
{items.map((it, i) => (
setStep(i)} style={{ width: 28, height: 28, borderRadius: "50%", background: i < step ? "var(--success)" : i === step ? "var(--blue-500)" : "var(--n-200)", color: i <= step ? "#fff" : "var(--n-600)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 13, cursor: "pointer", flexShrink: 0 }}> {i < step ? : i + 1}
{i < items.length - 1 &&
}
{it.t}
{it.d}
))}
); }; const TabsIconDemo = () => { const [idx, setIdx] = React.useState(0); const items = [{ icon: "home", t: "首頁" }, { icon: "user", t: "成員" }, { icon: "set", t: "設定" }]; return (
{items.map((t, i) => (
setIdx(i)} style={{ padding: "12px 4px", fontSize: 14, color: i === idx ? "var(--blue-500)" : "var(--n-700)", fontWeight: i === idx ? 500 : 400, borderBottom: i === idx ? "2px solid var(--blue-500)" : "2px solid transparent", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6 }}> {t.t}
))}
); }; const DropdownDemo = () => { 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)}> 更多動作 {open && (
編輯
複製
下載
刪除
)}
); }; Object.assign(window, { T_MenuBar, T_AppBar, T_BottomNav, T_Breadcrumb, T_Drawer, T_Links, T_Pagination, T_SpeedDial, T_Stepper, T_Tabs, T_Dropdown, T_Anchor, DocNav });