Polish static UI flows

2026-05-28 12:29:12 +08:00
parent 5edfa05369
commit bbe29622c2
45 changed files with 2187 additions and 813 deletions
@@ -0,0 +1,65 @@
+import Link from "next/link";
+import Icon from "./Icon";
+
+export interface Crumb {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  /** Pass crumbs to show breadcrumbs (e.g. inner pages). Omit to show the team switcher (workspace). */
+  crumbs?: Crumb[];
+  balance?: string;
+}
+
+export default function Topbar({ crumbs, balance = "¥327.40" }: Props) {
+  return (
+    <header className="topbar">
+      {crumbs && crumbs.length > 0 ? (
+        <nav className="crumbs">
+          {crumbs.map((c, i) => {
+            const last = i === crumbs.length - 1;
+            const sep = i > 0 ? <span key={`s-${i}`} className="sep">/</span> : null;
+            return last ? (
+              <span key={c.label}>{sep}<span className="here">{c.label}</span></span>
+            ) : (
+              <span key={c.label}>
+                {sep}
+                {c.href ? <Link href={c.href}>{c.label}</Link> : <span>{c.label}</span>}
+              </span>
+            );
+          })}
+        </nav>
+      ) : (
+        <div className="team-switcher" role="button">
+          <div className="p">个</div>
+          个人工作室
+          <Icon name="chev-down" size={12} className="chev" />
+        </div>
+      )}
+
+      <div className="top-r">
+        <span className="balance-chip">
+          <Icon name="credit-card" size={13} />
+          余额 <strong>{balance}</strong>
+        </span>
+        <button className="icon-btn" aria-label="通知">
+          <Icon name="bell" />
+          <span className="dot" />
+        </button>
+        <button className="pill-btn">
+          <Icon name="help" />
+          帮助
+        </button>
+        <button className="pill-btn">
+          <Icon name="doc" />
+          文档
+        </button>
+        <button className="pill-btn upgrade">
+          <Icon name="up" />
+          升级
+        </button>
+      </div>
+    </header>
+  );
+}