@zmzai/theme 0.5.3 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",

package/src/components/icon/Icon.tsx

@@ -28,6 +28,7 @@ const paths: Record<string, { d: string; fill?: boolean }> = {
   external: { d: "M4 12V4h4M4 12L12 4M8 3.5h4.5V8" },
 
   // === 导航/语义 ===
+  menu: { d: "M3.5 5h9M3.5 8h9M3.5 11h9" },
   home: { d: "M2.5 7.5L8 3l5.5 4.5M4 6.5V13.5h8V6.5" },
   grid: { d: "M3.5 3.5h3.5v3.5H3.5zM9 3.5h3.5v3.5H9zM3.5 9h3.5v3.5H3.5zM9 9h3.5v3.5H9z" },
   key: { d: "M11 3.5a3.5 3.5 0 1 1-2 6.3L5.5 13.3 4 11.8l1.4-1.4L4 8.9 5 8l2.2 2.2A3.5 3.5 0 0 1 11 3.5zM11.8 6.2v.01" },

package/src/components/navbar/Navbar.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { type ReactNode } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import { cn } from "../../utils/cn";
 import { Logo } from "../../brand/logo";
 import { Wordmark } from "../../brand/wordmark";
+import { Icon } from "../icon/Icon";
 
 /**
  * navItemClass — 导航项统一样式（全域导航一致）。
@@ -34,6 +35,8 @@ export interface NavbarProps {
   badge?: ReactNode;
   /** 品牌区点击链接（通常回首页，如 "/"）；不传则品牌区不可点击 */
   brandHref?: string;
+  /** 开启移动端菜单：<md 断点时导航与操作区收进汉堡下拉（默认 false 保持横向滚动） */
+  mobileMenu?: boolean;
   className?: string;
 }
 
@@ -50,13 +53,37 @@ export interface NavbarProps {
  *   <Link href="/audit" className={navItemClass(pathname === "/audit")}>运行审计</Link>
  * </Navbar>
  */
-export function Navbar({ sublabel, brand, children, actions, badge, brandHref, className }: NavbarProps) {
+export function Navbar({ sublabel, brand, children, actions, badge, brandHref, mobileMenu = false, className }: NavbarProps) {
+  const [open, setOpen] = useState(false);
+
+  // Esc 关闭面板
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+
   const brandNode = brand ?? (
     <span className="inline-flex items-center gap-2">
       <Logo size={22} />
       <Wordmark size={16} sublabel={sublabel} />
     </span>
   );
+  const nav = children ? (
+    <nav
+      className="flex min-w-0 items-center gap-1 overflow-x-auto"
+      aria-label="主导航"
+    >
+      {children}
+    </nav>
+  ) : null;
+  const actionBox = actions ? (
+    <div className="flex shrink-0 items-center gap-2.5">{actions}</div>
+  ) : null;
+
   return (
     <header
       className={cn(
@@ -74,12 +101,54 @@ export function Navbar({ sublabel, brand, children, actions, badge, brandHref, c
         )}
         {badge}
       </div>
-      {children ? (
-        <nav className="flex min-w-0 items-center gap-1 overflow-x-auto" aria-label="主导航">
-          {children}
-        </nav>
-      ) : null}
-      {actions ? <div className="flex shrink-0 items-center gap-2.5">{actions}</div> : null}
+
+      {mobileMenu ? (
+        <>
+          {/* 桌面端：导航 + 操作区原样 */}
+          <div className="hidden min-w-0 items-center gap-2.5 md:flex">
+            {nav}
+            {actionBox}
+          </div>
+
+          {/* 移动端：汉堡按钮 + 下拉面板（点击面板内任意处关闭） */}
+          <div className="relative md:hidden">
+            <button
+              type="button"
+              aria-label={open ? "关闭菜单" : "打开菜单"}
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+              className="inline-flex h-9 w-9 items-center justify-center rounded-full text-ink-2 transition-colors hover:bg-surface-2 hover:text-ink"
+            >
+              <Icon name={open ? "cross" : "menu"} size={16} />
+            </button>
+            {open ? (
+              <div
+                onClick={() => setOpen(false)}
+                className="absolute right-0 top-full mt-2 flex w-60 flex-col gap-1 rounded-xl border border-line bg-paper p-2 shadow-lg"
+              >
+                {children ? (
+                  <nav
+                    className="flex flex-col items-stretch gap-1"
+                    aria-label="主导航"
+                  >
+                    {children}
+                  </nav>
+                ) : null}
+                {actions ? (
+                  <div className="mt-1 flex flex-col items-stretch gap-1 border-t border-line pt-2">
+                    {actions}
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        </>
+      ) : (
+        <>
+          {nav}
+          {actionBox}
+        </>
+      )}
     </header>
   );
 }