@orbit-work/ui 0.1.0

package/src/components/composite/StatusTag/index.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { cva } from "class-variance-authority"
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+
+/**
+ * StatusTag —— 目录状态签（DS 2.0 模式层，卡与详情共用的唯一形）
+ *
+ * 归口口径（A4-B3）：插件/技能/连接器/智能体这一族原本有三套写法 ——
+ * `.connector-update-tag`（页面层裸 span）、`composite/Tag`（带边框的分类标）、
+ * `primitives/Chip`（带状态点的度量胶囊）。三者在同一张卡的同一行里并肩出现，
+ * 高度、圆角、字号、面色语法各不相同。这里收成一件：
+ *
+ * - **形**：20 高 · `--ow-radius-xs`(6) · `--ow-fs-mark-md`(11) / 500 · 无边框。
+ *   不是 Tag（Tag 带 1px 边、md 档 12px、承担可交互筛选），也不是 Chip
+ *   （Chip 是带 mono 读数位的度量件）。状态签只读、不可点、不带点。
+ * - **色**：一律 tint 底 + on-tint 字，**不用实底**——实底是行动极的语法（§4 三极），
+ *   状态是陈述不是召唤。三档 TONE：`ok`(success) / `warn`(warning) / `mute`(中性面)。
+ * - **归属档**：`mine` 走 `--ow-mention-bg/--ow-mention-text`（原型同形不同族：
+ *   「我的 / 专家团」讲的是归属不是状态，与三档状态色分开，形保持一致）。
+ * - **文案**：状态词表锁在 `STATUS_TAG_PRESETS`，卡与详情引同一份，见下。
+ *   R1 双编码：色永远伴随可读文字，色本身不承担唯一信息。
+ */
+export type StatusTagTone = "ok" | "warn" | "mute" | "mine"
+
+/** 目录域状态词表；卡与详情共用同一份文案与色档，避免两处各写各的。 */
+export type StatusTagPreset = "installed" | "update" | "connected" | "needsAuth" | "installing" | "mine" | "team"
+
+export const STATUS_TAG_PRESETS: Record<StatusTagPreset, { label: string; tone: StatusTagTone }> = {
+  installed: { label: "已安装", tone: "ok" },
+  update: { label: "有更新", tone: "warn" },
+  connected: { label: "已连接", tone: "ok" },
+  needsAuth: { label: "待授权", tone: "warn" },
+  installing: { label: "正在安装", tone: "mute" },
+  mine: { label: "我的", tone: "mine" },
+  team: { label: "专家团", tone: "mine" },
+}
+
+const statusTagVariants = cva(
+  "inline-flex shrink-0 items-center whitespace-nowrap h-5 px-[var(--ow-space-15)] font-medium text-ow-fs-mark-md leading-5 [border-radius:var(--ow-radius-xs)]",
+  {
+    variants: {
+      tone: {
+        ok: "bg-[var(--ow-success-tint)] text-[color:var(--ow-success-on-tint)]",
+        warn: "bg-[var(--ow-warning-tint)] text-[color:var(--ow-warning-on-tint)]",
+        // L2-2-5：mute 字色走局部变量，暗档在 styles/components.css 里换 --ow-text（暗档 text-2 只有 4.24:1）。
+        mute: "bg-ow-surface-2 text-[color:var(--ow-status-tag-mute-text,var(--ow-text-2))]",
+        mine: "bg-[var(--ow-mention-bg)] text-[color:var(--ow-mention-text)]",
+      },
+    },
+    defaultVariants: { tone: "mute" },
+  },
+)
+
+export interface StatusTagProps {
+  /** 词表档：同时给出文案与色档（`children` 可覆盖文案，`tone` 可覆盖色档）。 */
+  status?: StatusTagPreset
+  tone?: StatusTagTone
+  children?: ReactNode
+  className?: string
+  title?: string
+}
+
+export function StatusTag({ status, tone, children, className, title }: StatusTagProps) {
+  const preset = status ? STATUS_TAG_PRESETS[status] : undefined
+  const label = children ?? preset?.label
+  if (label == null) return null
+  return (
+    <span
+      data-slot="status-tag"
+      className={cn(statusTagVariants({ tone: tone ?? preset?.tone ?? "mute" }), className)}
+      title={title}
+    >
+      {label}
+    </span>
+  )
+}

package/src/components/composite/StepList/StepList.stories.tsx

@@ -0,0 +1,352 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useEffect, useState } from "react"
+import { StepList } from "./index"
+
+const meta = {
+  title: "Composite/StepList",
+  component: StepList,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof StepList>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    steps: [
+      { label: "分析项目结构", status: "done" },
+      { label: "生成代码", status: "running" },
+      { label: "运行测试", status: "todo" },
+      { label: "提交更改", status: "todo" },
+    ],
+  },
+}
+
+export const AllDone: Story = {
+  args: {
+    steps: [
+      { label: "初始化项目", status: "done" },
+      { label: "安装依赖", status: "done" },
+      { label: "配置环境", status: "done" },
+      { label: "启动服务", status: "done" },
+    ],
+  },
+}
+
+export const AllTodo: Story = {
+  args: {
+    steps: [
+      { label: "克隆仓库", status: "todo" },
+      { label: "安装依赖", status: "todo" },
+      { label: "运行构建", status: "todo" },
+      { label: "部署上线", status: "todo" },
+    ],
+  },
+}
+
+export const SingleStep: Story = {
+  args: {
+    steps: [{ label: "执行任务", status: "running" }],
+  },
+}
+
+export const TwoSteps: Story = {
+  args: {
+    steps: [
+      { label: "第一步", status: "done" },
+      { label: "第二步", status: "todo" },
+    ],
+  },
+}
+
+export const ManySteps: Story = {
+  args: {
+    steps: [
+      { label: "读取配置文件", status: "done" },
+      { label: "验证输入参数", status: "done" },
+      { label: "连接数据库", status: "done" },
+      { label: "执行数据迁移", status: "done" },
+      { label: "更新索引", status: "running" },
+      { label: "清理缓存", status: "todo" },
+      { label: "重启服务", status: "todo" },
+      { label: "验证结果", status: "todo" },
+      { label: "发送通知", status: "todo" },
+      { label: "生成报告", status: "todo" },
+    ],
+  },
+}
+
+export const LongLabels: Story = {
+  args: {
+    steps: [
+      { label: "正在分析整个项目的代码结构，包括所有的模块、组件和依赖关系", status: "done" },
+      { label: "根据最佳实践生成优化后的代码，并确保符合团队的编码规范", status: "running" },
+      { label: "运行完整的测试套件，包括单元测试、集成测试和端到端测试", status: "todo" },
+    ],
+  },
+}
+
+export const ShortLabels: Story = {
+  args: {
+    steps: [
+      { label: "读取", status: "done" },
+      { label: "解析", status: "done" },
+      { label: "转换", status: "running" },
+      { label: "写入", status: "todo" },
+    ],
+  },
+}
+
+export const BuildProcess: Story = {
+  args: {
+    steps: [
+      { label: "清理构建目录", status: "done" },
+      { label: "编译 TypeScript", status: "done" },
+      { label: "打包资源文件", status: "done" },
+      { label: "优化输出", status: "running" },
+      { label: "生成 sourcemap", status: "todo" },
+      { label: "压缩代码", status: "todo" },
+    ],
+  },
+}
+
+export const DeploymentProcess: Story = {
+  args: {
+    steps: [
+      { label: "构建 Docker 镜像", status: "done" },
+      { label: "推送到镜像仓库", status: "done" },
+      { label: "更新 Kubernetes 配置", status: "running" },
+      { label: "滚动更新服务", status: "todo" },
+      { label: "健康检查", status: "todo" },
+    ],
+  },
+}
+
+export const TestingProcess: Story = {
+  args: {
+    steps: [
+      { label: "设置测试环境", status: "done" },
+      { label: "运行单元测试", status: "done" },
+      { label: "运行集成测试", status: "running" },
+      { label: "运行 E2E 测试", status: "todo" },
+      { label: "生成覆盖率报告", status: "todo" },
+    ],
+  },
+}
+
+export const AnimatedProgress: Story = {
+  render: () => {
+    const [currentStep, setCurrentStep] = useState(0)
+
+    const labels = ["初始化项目", "安装依赖包", "配置开发环境", "生成项目结构", "创建示例代码", "完成设置"]
+
+    const steps = labels.map((label, i) => ({
+      label,
+      status: i < currentStep ? "done" : i === currentStep ? "running" : "todo",
+    }))
+
+    useEffect(() => {
+      if (currentStep >= labels.length) {
+        return
+      }
+      const timer = setTimeout(() => {
+        setCurrentStep((prev) => prev + 1)
+      }, 1500)
+      return () => clearTimeout(timer)
+    }, [currentStep, labels.length])
+
+    return (
+      <div>
+        <StepList steps={steps} />
+        {currentStep >= labels.length && (
+          <div
+            style={{
+              marginTop: 16,
+              padding: 12,
+              background: "var(--ow-success-bg)",
+              color: "var(--ow-success)",
+              borderRadius: 8,
+              fontSize: 14,
+            }}
+          >
+            ✓ 所有步骤已完成
+          </div>
+        )}
+        {currentStep < labels.length && (
+          <button
+            onClick={() => setCurrentStep(labels.length)}
+            style={{
+              marginTop: 16,
+              padding: "6px 12px",
+              background: "var(--ow-surface-2)",
+              border: "1px solid var(--ow-border-strong)",
+              borderRadius: 6,
+              cursor: "pointer",
+              fontSize: 13,
+              color: "var(--ow-text-2)",
+            }}
+          >
+            跳过到完成
+          </button>
+        )}
+      </div>
+    )
+  },
+}
+
+export const InteractiveControl: Story = {
+  render: () => {
+    const [steps, setSteps] = useState([
+      { label: "步骤 1", status: "done" as const },
+      { label: "步骤 2", status: "running" as const },
+      { label: "步骤 3", status: "todo" as const },
+      { label: "步骤 4", status: "todo" as const },
+    ])
+
+    const handleNext = () => {
+      const runningIndex = steps.findIndex((s) => s.status === "running")
+      if (runningIndex !== -1 && runningIndex < steps.length - 1) {
+        const newSteps = [...steps]
+        newSteps[runningIndex].status = "done"
+        newSteps[runningIndex + 1].status = "running"
+        setSteps(newSteps)
+      } else if (runningIndex === steps.length - 1) {
+        const newSteps = [...steps]
+        newSteps[runningIndex].status = "done"
+        setSteps(newSteps)
+      }
+    }
+
+    const handleReset = () => {
+      setSteps([
+        { label: "步骤 1", status: "done" },
+        { label: "步骤 2", status: "running" },
+        { label: "步骤 3", status: "todo" },
+        { label: "步骤 4", status: "todo" },
+      ])
+    }
+
+    const allDone = steps.every((s) => s.status === "done")
+
+    return (
+      <div>
+        <StepList steps={steps} />
+        <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
+          <button
+            onClick={handleNext}
+            disabled={allDone}
+            style={{
+              padding: "6px 12px",
+              background: allDone ? "var(--ow-surface)" : "var(--ow-surface-2)",
+              border: "1px solid var(--ow-border-strong)",
+              borderRadius: 6,
+              cursor: allDone ? "not-allowed" : "pointer",
+              fontSize: 13,
+              color: allDone ? "var(--ow-text-3)" : "var(--ow-text-2)",
+            }}
+          >
+            下一步
+          </button>
+          <button
+            onClick={handleReset}
+            style={{
+              padding: "6px 12px",
+              background: "var(--ow-surface-2)",
+              border: "1px solid var(--ow-border-strong)",
+              borderRadius: 6,
+              cursor: "pointer",
+              fontSize: 13,
+              color: "var(--ow-text-2)",
+            }}
+          >
+            重置
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const ConstrainedWidth: Story = {
+  render: () => (
+    <div style={{ maxWidth: 300 }}>
+      <StepList
+        steps={[
+          { label: "在较窄的容器中显示步骤列表", status: "done" },
+          { label: "测试文本换行和布局", status: "running" },
+          { label: "确保在各种宽度下都能正常工作", status: "todo" },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const WideLayout: Story = {
+  render: () => (
+    <div style={{ width: 600 }}>
+      <StepList
+        steps={[
+          { label: "在较宽的容器中显示", status: "done" },
+          { label: "步骤标签左对齐", status: "running" },
+          { label: "图标大小保持一致", status: "todo" },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const EmptySteps: Story = {
+  args: {
+    steps: [],
+  },
+}
+
+export const MultipleProgressStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>刚开始</div>
+        <StepList
+          steps={[
+            { label: "步骤 1", status: "running" },
+            { label: "步骤 2", status: "todo" },
+            { label: "步骤 3", status: "todo" },
+          ]}
+        />
+      </div>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>进行中</div>
+        <StepList
+          steps={[
+            { label: "步骤 1", status: "done" },
+            { label: "步骤 2", status: "running" },
+            { label: "步骤 3", status: "todo" },
+          ]}
+        />
+      </div>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>即将完成</div>
+        <StepList
+          steps={[
+            { label: "步骤 1", status: "done" },
+            { label: "步骤 2", status: "done" },
+            { label: "步骤 3", status: "running" },
+          ]}
+        />
+      </div>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>已完成</div>
+        <StepList
+          steps={[
+            { label: "步骤 1", status: "done" },
+            { label: "步骤 2", status: "done" },
+            { label: "步骤 3", status: "done" },
+          ]}
+        />
+      </div>
+    </div>
+  ),
+}

package/src/components/composite/StepList/index.tsx

@@ -0,0 +1,23 @@
+import { PlanCard, type PlanCardStep } from "../../domain/chat/PlanCard"
+
+export type StepStatus = "done" | "running" | "todo"
+
+export type StepItem = {
+  label: string
+  status: StepStatus
+}
+
+export type StepListProps = {
+  steps: StepItem[]
+  className?: string
+}
+
+/**
+ * DS 2.0：StepList 已并入 Plan/StepList —— 本组件保留为兼容薄壳，
+ * 转发到 domain/chat/PlanCard 清单式（无 goal 降级形态，照规格卡）。
+ * 新代码请直接使用 PlanCard；旧 props（status）在此映射为 PlanCardStep.state。
+ */
+export function StepList({ steps, className = "" }: StepListProps) {
+  const mapped: PlanCardStep[] = steps.map((step) => ({ label: step.label, state: step.status }))
+  return <PlanCard steps={mapped} className={className} />
+}