{/* Login */}

歡迎回來

登入以管理你的設計資產

密碼忘記密碼？

登入

還沒有帳號？註冊

{/* Dashboard */}

儀表板

本週概況 · 4/24 - 4/30

本週新增

{[ { l: "資產總數", n: "1,284", d: "+24 本週", c: "var(--success)" }, { l: "活躍成員", n: "32", d: "+3 本週", c: "var(--success)" }, { l: "處理中任務", n: "8", d: "-2 本週", c: "var(--n-500)" }, { l: "錯誤回報", n: "3", d: "+1 本週", c: "var(--error)" }, ].map((c, i) => (

{c.l}

{c.n}

{c.d}

))}

每日活躍量

近期動態

{["Alice 上傳了新版 logo", "Bob 完成了「合約模板」", "Cathy 分享了專案 X"].map((t, i) => (

{"ABC"[i]}

{t}

{i + 1} 小時前

))}

{/* List Page */}

資產列表

篩選 新增資產

{["名稱", "狀態", "擁有者", "標籤", "更新時間", ""].map(h => ( ))} {[ ["品牌資產 A.png", "success", "已完成", "Alice", ["設計", "Logo"], "2 小時前"], ["設計稿 V2.fig", "warn", "處理中", "Bob", ["UI", "Mobile"], "昨天"], ["合約模板.docx", "success", "已完成", "Cathy", ["法務"], "2 天前"], ["年度報告.pdf", "error", "失敗", "David", ["財務", "2024"], "3 天前"], ["產品線框稿.fig", "n", "草稿", "Eve", ["UX"], "上週"], ].map((r, i) => ( ))}

{h}
{r[0]}	{r[2]}	{r[3]}	{r[4].map((t, j) => {t})}	{r[5]}

共 124 筆，第 1-5 筆

{/* Form */}

建立新專案

填寫以下資訊以建立專案。標示 * 為必填欄位。

專案名稱 *

描述

</div>
          <div className="ds-grid ds-grid--2">
            <div>
              <label style={{ fontSize: 13, fontWeight: 500, display: "block", marginBottom: 6 }}>類型 *</label>
              <Select options={["行銷活動", "產品設計", "內部專案"]} defaultIndex={0} width={"100%"} />
            </div>
            <div>
              <label style={{ fontSize: 13, fontWeight: 500 }}>截止日期</label>
              <input type="date" style={inputCss()} defaultValue="2026-06-30" />
            </div>
          </div>
          <div>
            <label style={{ fontSize: 13, fontWeight: 500, display: "block", marginBottom: 8 }}>權限</label>
            <RadioGroup options={["僅自己可見", "團隊可見", "公開連結 (任何人可見)"]} defaultIndex={0} vertical />
          </div>
        </div>

{/* Empty / 404 */}
    <Card id="u-empty" title="Patterns-Empty State / Error Pages">
      <div className="ds-grid ds-grid--2">
        <div style={{ background: "var(--n-50)", border: "1px dashed var(--n-300)", borderRadius: 12, padding: 48, textAlign: "center" }}>
          <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--blue-50)", margin: "0 auto 16px", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name="search" size={28} color="var(--blue-500)" />
          </div>
          <div style={{ fontWeight: 600, fontSize: 16 }}>找不到符合的結果</div>
          <div style={{ fontSize: 13, color: "var(--n-600)", margin: "6px 0 18px" }}>試試其他關鍵字，或調整篩選條件。</div>
          <B kind="outline">清除篩選</B>
        </div>
        <div style={{ background: "var(--n-50)", borderRadius: 12, padding: 48, textAlign: "center" }}>
          <div style={{ fontSize: 72, fontWeight: 700, fontFamily: "var(--ff-en)", color: "var(--blue-500)", lineHeight: 1 }}>404</div>
          <div style={{ fontWeight: 600, fontSize: 16, marginTop: 8 }}>找不到此頁面</div>
          <div style={{ fontSize: 13, color: "var(--n-600)", margin: "6px 0 18px" }}>頁面可能已被移除或網址有誤。</div>
          <B kind="filled">回到首頁</B>
        </div>
      </div>
    </Card>

{/* Settings */}
    <Card id="u-settings" title="Patterns-Settings">
      <SettingsDemo />
    </Card>

{/* Wizard — 新增 */}
    <Card id="u-wizard" title="Patterns-Wizard / Multi-step Form">
      <WizardDemo />
    </Card>

{/* Profile — 新增 */}
    <Card id="u-profile" title="Patterns-Profile / User Page">
      <div style={{ background: "var(--n-50)", borderRadius: 12, overflow: "hidden" }}>
        <div style={{ height: 120, background: "linear-gradient(135deg,var(--blue-400),var(--blue-700))" }} />
        <div style={{ padding: "0 32px 32px" }}>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 20, marginTop: -40 }}>
            <div style={{ width: 96, height: 96, borderRadius: "50%", background: "#2492ff", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 36, border: "4px solid #fff", boxShadow: "var(--shadow-2)" }}>L</div>
            <div style={{ flex: 1, paddingBottom: 8 }}>
              <div style={{ fontSize: 22, fontWeight: 600 }}>林小明 <span style={{ fontSize: 13, fontWeight: 400, color: "var(--n-500)", marginLeft: 6 }}>@xiaoming</span></div>
              <div style={{ fontSize: 13, color: "var(--n-600)", marginTop: 2 }}>產品設計師 · Acme Corp · 台北</div>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <B kind="outline" icon="mail">傳訊息</B>
              <B kind="filled" icon="user">追蹤</B>
            </div>
          </div>

<h3 style={{ fontSize: 15, fontWeight: 600, margin: "24px 0 12px" }}>近期專案</h3>
          <div className="ds-grid ds-grid--3">
            {[
              { t: "品牌識別系統", d: "更新於 2 天前", tag: "設計" },
              { t: "App Onboarding", d: "更新於上週",     tag: "UX" },
              { t: "Dashboard v2",   d: "更新於 3 週前",  tag: "Web" },
            ].map((p, i) => (
              <div key={i} style={{ background: "#fff", borderRadius: 10, padding: 16, border: "1px solid var(--n-200)" }}>
                <div style={{ height: 90, background: "var(--blue-50)", borderRadius: 6, marginBottom: 10 }} />
                <div style={{ fontWeight: 500, fontSize: 14 }}>{p.t}</div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 6 }}>
                  <span className="ds-pill ds-pill--n">{p.tag}</span>
                  <span className="ds-cap">{p.d}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Card>

{/* Pricing — 新增 */}
    <Card id="u-pricing" title="Patterns-Pricing">
      <PricingDemo />
    </Card>

</Section>
);

// ---------- Demo helpers ----------
const SettingsDemo = () => {
  const [tab, setTab] = React.useState(0);
  const labels = ["個人資料", "通知設定", "安全性", "計費資訊", "API Token"];
  return (
    <div style={{ display: "flex", gap: 24 }}>
      <div style={{ width: 180, flexShrink: 0 }}>
        {labels.map((t, i) => (
          <div key={i} onClick={() => setTab(i)} style={{
            padding: "10px 14px", fontSize: 14, borderRadius: 6, marginBottom: 2, cursor: "pointer",
            color: i === tab ? "var(--blue-600)" : "var(--n-700)",
            background: i === tab ? "var(--blue-50)" : "transparent",
            fontWeight: i === tab ? 500 : 400,
            transition: "all var(--dur-fast) var(--ease)",
          }}>{t}</div>
        ))}
      </div>
      <div style={{ flex: 1, maxWidth: 560 }}>
        <h3 style={{ fontSize: 18, fontWeight: 600, margin: "0 0 4px" }}>{labels[tab]}</h3>
        <p style={{ fontSize: 13, color: "var(--n-600)", marginTop: 0 }}>{["更新你的姓名、頭像與聯絡資訊。", "管理你收到的通知類型。", "密碼與登入安全設定。", "查看訂閱方案與帳單。", "管理 API 存取權杖。"][tab]}</p>
        {tab === 0 && (
          <>
            <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "20px 0", borderTop: "1px solid var(--n-200)", borderBottom: "1px solid var(--n-200)", marginTop: 16 }}>
              <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--blue-500)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 22 }}>L</div>
              <div>
                <B kind="outline" size="sm">更換頭像</B>
                <div className="ds-cap" style={{ marginTop: 6 }}>JPG / PNG，最大 2MB</div>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 20 }}>
              <div>
                <label style={{ fontSize: 13, fontWeight: 500 }}>姓名</label>
                <input style={inputCss()} defaultValue="林小明" />
              </div>
              <div>
                <label style={{ fontSize: 13, fontWeight: 500 }}>Email</label>
                <input style={inputCss()} defaultValue="ming@example.com" />
              </div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 0", borderTop: "1px solid var(--n-100)" }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>雙重驗證</div>
                  <div className="ds-cap">登入時要求額外的驗證碼。</div>
                </div>
                <Switch defaultOn />
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 24 }}>
              <B kind="ghost">取消</B>
              <B kind="filled">儲存變更</B>
            </div>
          </>
        )}
        {tab === 1 && (
          <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 0 }}>
            {[
              ["新成員加入", "當有新成員加入你的團隊時通知你。"],
              ["評論與提及", "別人 @ 你或評論你的內容時。"],
              ["每週摘要", "每週一發送上週活動摘要。"],
              ["產品更新", "新功能與系統公告。"],
            ].map(([t, d], i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 0", borderTop: i ? "1px solid var(--n-100)" : "none" }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{t}</div>
                  <div className="ds-cap">{d}</div>
                </div>
                <Switch defaultOn={i < 2} />
              </div>
            ))}
          </div>
        )}
        {tab >= 2 && (
          <div style={{ padding: 32, background: "var(--n-50)", borderRadius: 8, textAlign: "center", color: "var(--n-500)", fontSize: 13, marginTop: 16 }}>
            {labels[tab]} 內容 — 範例頁面
          </div>
        )}
      </div>
    </div>
  );
};

const WizardDemo = () => {
  const [step, setStep] = React.useState(0);
  const labels = ["基本資料", "設定選項", "團隊邀請", "完成"];
  return (
    <div style={{ maxWidth: 720 }}>
      <h3 style={{ fontSize: 18, fontWeight: 600, margin: "0 0 4px" }}>建立工作區</h3>
      <p style={{ fontSize: 13, color: "var(--n-600)", marginTop: 0 }}>跟隨步驟完成設定，過程中可隨時返回上一步。</p>

{/* Steps header */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, margin: "20px 0 28px" }}>
        {labels.map((s, i) => (
          <React.Fragment key={i}>
            <div onClick={() => i <= step && setStep(i)} style={{ display: "flex", alignItems: "center", gap: 8, cursor: i <= step ? "pointer" : "default" }}>
              <div 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,
              }}>{i < step ? <Icon name="check" size={16} /> : i + 1}</div>
              <span style={{ fontSize: 13, fontWeight: i === step ? 600 : 400, color: i <= step ? "var(--n-900)" : "var(--n-500)" }}>{s}</span>
            </div>
            {i < labels.length - 1 && <div style={{ flex: 1, height: 2, background: i < step ? "var(--success)" : "var(--n-200)" }} />}
          </React.Fragment>
        ))}
      </div>

{/* Step body */}
      <div style={{ background: "var(--n-50)", borderRadius: 12, padding: 28, minHeight: 220 }}>
        {step === 0 && (
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div>
              <label style={{ fontSize: 13, fontWeight: 500 }}>工作區名稱 *</label>
              <input style={inputCss()} defaultValue="Acme Design Team" />
            </div>
            <div>
              <label style={{ fontSize: 13, fontWeight: 500 }}>網址</label>
              <div style={{ display: "flex", alignItems: "center", gap: 0, marginTop: 6 }}>
                <span style={{ padding: "0 12px", height: 36, display: "flex", alignItems: "center", background: "var(--n-100)", border: "1px solid var(--n-300)", borderRight: "none", borderRadius: "6px 0 0 6px", fontSize: 13, color: "var(--n-600)" }}>app.example.com/</span>
                <input defaultValue="acme" style={{ ...inputCss(), marginTop: 0, borderRadius: "0 6px 6px 0" }} />
              </div>
            </div>
          </div>
        )}
        {step === 1 && (
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 8 }}>工作區類型</div>
              <RadioGroup options={["設計團隊", "工程團隊", "綜合 (推薦)"]} defaultIndex={2} vertical />
            </div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 0", borderTop: "1px solid var(--n-200)" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>啟用客人模式</div>
                <div className="ds-cap">允許未註冊使用者透過連結檢視。</div>
              </div>
              <Switch />
            </div>
          </div>
        )}
        {step === 2 && (
          <div>
            <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 8 }}>邀請成員（以逗號分隔多個 email）</div>
            <textarea style={{ ...inputCss(), height: 110, padding: 12, resize: "vertical", marginTop: 0 }} defaultValue="alice@acme.com, bob@acme.com" />
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 10 }}>
              {["alice@acme.com", "bob@acme.com"].map((e) => (
                <span key={e} className="ds-pill ds-pill--n" style={{ height: 26, padding: "0 10px" }}>{e} <Icon name="x" size={12} style={{ marginLeft: 6, cursor: "pointer" }} /></span>
              ))}
            </div>
          </div>
        )}
        {step === 3 && (
          <div style={{ textAlign: "center", padding: "16px 0" }}>
            <div style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--success-bg)", margin: "0 auto 16px", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="check" size={36} color="var(--success)" />
            </div>
            <div style={{ fontSize: 18, fontWeight: 600 }}>設定完成！</div>
            <div style={{ fontSize: 13, color: "var(--n-600)", marginTop: 6 }}>你的工作區已建立，現在可以開始邀請成員與建立專案。</div>
          </div>
        )}
      </div>

{/* Nav */}
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 20 }}>
        <B kind="outline" onClick={() => setStep(Math.max(0, step - 1))} disabled={step === 0}>上一步</B>
        {step < labels.length - 1
          ? <B kind="filled" onClick={() => setStep(step + 1)}>下一步</B>
          : <B kind="filled" icon="check">前往工作區</B>}
      </div>
    </div>
  );
};

window.Patterns = Patterns;