@zmzai/theme 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "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/index.ts

@@ -57,6 +57,7 @@ export * from "./markdown";
 export * from "./markdown";
 export * from "./diff-view";
 export * from "./tool-card";
+export * from "./subtask";
 export * from "./todo-checklist";
 export * from "./permission-card";
 

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>
   );
 }

package/src/components/subtask/SubtaskPart.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import "./subtask.css";
+
+import { Badge } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+
+export interface SubtaskPartProps {
+  /** 子任务描述；缺省时回退显示 agent 名 */
+  description?: string;
+  /** 执行该子任务的智能体名 */
+  agent?: string;
+  /** 子任务 prompt（mono 小字显示） */
+  prompt?: string;
+}
+
+/**
+ * SubtaskPart — 执行树中的子任务行（分支线样式与 ToolCard 一致）。
+ *
+ * 上下文增强（执行树 ::before 分支线）依赖消费端容器留出左侧空间，
+ * 与 ToolCard 的执行树用法相同。
+ */
+export function SubtaskPart({ description, agent, prompt }: SubtaskPartProps) {
+  return (
+    <div className="subtask-row">
+      <span className="subtask-icon" aria-hidden>
+        <Icon name="chevron-down" size={12} />
+      </span>
+      <span className="subtask-copy">
+        <strong>{description || agent}</strong>
+        {prompt ? <small>{prompt}</small> : null}
+      </span>
+      <Badge variant="outline" size="sm">子任务</Badge>
+    </div>
+  );
+}

package/src/components/subtask/index.ts

@@ -0,0 +1 @@
+export * from "./SubtaskPart";

package/src/components/subtask/subtask.css

@@ -0,0 +1,11 @@
+/* SubtaskPart — 执行树中的子任务行。token 依赖消费端 @theme
+   （--color-line、--color-accent、--color-muted、--font-mono）。
+   执行树分支线（::before）等上下文增强由消费端自己的 CSS 叠加。 */
+
+.subtask-row { position: relative; display: flex; align-items: center; gap: 0.5rem; min-height: 2.15rem; padding: 0.38rem 0.4rem; background: transparent; }
+/* 执行树分支线（挂在左侧时间轴上；独立使用时容器需留出左侧空间） */
+.subtask-row::before { position: absolute; top: 1.08rem; left: -0.81rem; width: 0.81rem; height: 1px; background: var(--color-line); content: ""; }
+.subtask-icon { display: grid; width: 1rem; height: 1rem; place-items: center; color: var(--color-accent); }
+.subtask-copy { display: grid; min-width: 0; flex: 1; gap: 0.1rem; }
+.subtask-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 600; }
+.subtask-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.6rem; }