@zmzai/theme 0.5.4 → 0.5.5

package/package.json

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

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