@orbit-work/ui 0.1.0

package/src/components/domain/tasks/ScheduledTaskCardView/ScheduledTaskCardView.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ScheduledTaskCardViewModel } from "./index"
+import { ScheduledTaskCardView } from "./index"
+
+const meta = {
+  title: "Tasks/ScheduledTaskCardView",
+  component: ScheduledTaskCardView,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 380 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ScheduledTaskCardView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const baseTask: ScheduledTaskCardViewModel = {
+  id: "task-1",
+  name: "每日代码审查",
+  prompt: "检查昨天合并的所有 PR，汇总潜在问题并生成审查报告，发送到团队频道。",
+  scheduleLabel: "0 9 * * *",
+  nextLabel: "明天 09:00",
+  paused: false,
+  status: { key: "running", label: "运行中" },
+}
+
+const noop = () => {}
+const noopAsync = async () => {}
+
+const handlers = {
+  onOpen: noop,
+  onEdit: noop,
+  onToggle: noopAsync,
+  onDelete: noop,
+}
+
+export const Running: Story = {
+  args: { task: baseTask, ...handlers },
+}
+
+export const Done: Story = {
+  args: {
+    task: { ...baseTask, id: "task-2", name: "周报生成", status: { key: "done", label: "上次成功" } },
+    ...handlers,
+  },
+}
+
+export const Failed: Story = {
+  args: {
+    task: {
+      ...baseTask,
+      id: "task-3",
+      name: "数据备份",
+      scheduleLabel: "30 2 * * *",
+      nextLabel: "明天 02:30",
+      status: { key: "failed", label: "上次失败" },
+    },
+    ...handlers,
+  },
+}
+
+export const Paused: Story = {
+  args: {
+    task: {
+      ...baseTask,
+      id: "task-4",
+      name: "依赖升级检查",
+      paused: true,
+      status: { key: "paused", label: "已暂停" },
+    },
+    ...handlers,
+  },
+}
+
+export const NeverRun: Story = {
+  args: {
+    task: {
+      ...baseTask,
+      id: "task-5",
+      name: "站点巡检",
+      nextLabel: "今晚 23:00",
+      status: { key: "none", label: "" },
+    },
+    ...handlers,
+  },
+}
+
+export const EmptyNameAndPrompt: Story = {
+  args: {
+    task: {
+      ...baseTask,
+      id: "task-6",
+      name: "",
+      prompt: "",
+      status: { key: "none", label: "" },
+    },
+    ...handlers,
+  },
+}
+
+export const LongContent: Story = {
+  args: {
+    task: {
+      ...baseTask,
+      id: "task-7",
+      name: "生产环境数据库定期备份与日志归档清理任务（超长名称截断示例）",
+      prompt:
+        "每天凌晨对生产库做全量备份，校验备份完整性后上传至对象存储；同时清理 30 天前的应用日志与临时文件，释放磁盘空间，并把执行结果汇总成一份简短报告发到运维频道。",
+      scheduleLabel: "0 3 * * 1-5",
+      nextLabel: "周一 03:00",
+      status: { key: "done", label: "上次成功" },
+    },
+    ...handlers,
+  },
+}

package/src/components/domain/tasks/ScheduledTaskCardView/ScheduledTaskCardViewSource.test.mjs

@@ -0,0 +1,40 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+/** 只在「代码」上验禁令：注释里点名旧写法是文档，不是用法。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+const cssCode = css.replace(/\/\*[\s\S]*?\*\//g, "")
+
+// ── W5 残留清扫：行末「更多」钮归 RowOverflowMenu 配方 ──
+
+test("§7 图标语义：更多操作的把手是 More，不是铅笔（铅笔＝编辑，只该在菜单项里）", () => {
+  assert.match(source, /import \{ RowOverflowMenu \} from "\.\.\/\.\.\/\.\.\/composite\/RowOverflowMenu"/)
+  assert.match(source, /<RowOverflowMenu[\s\S]*?ariaLabel="更多操作"/)
+  // 触发器的图标由 RowOverflowMenu 提供（More）；I2.Edit 只剩菜单项 icon
+  assert.doesNotMatch(code, /title="更多操作"[\s\S]{0,120}?<I2\.Edit \/>/)
+})
+
+test("弹层走 Menu 基座：自造 portal、硬编码 zIndex 501、自绘 backdrop 全部退场", () => {
+  assert.doesNotMatch(code, /createPortal/)
+  assert.doesNotMatch(code, /zIndex: 501/)
+  assert.doesNotMatch(code, /owuser-menu-backdrop/)
+  assert.doesNotMatch(code, /MenuSurface/)
+  // 卡片整张可点开详情，菜单那一格要吞掉冒泡
+  assert.match(source, /className="cjc-menu"[\s\S]*?onClick=\{\(event\) => event\.stopPropagation\(\)\}/)
+})
+
+test("自绘的 .cjc-act 方钮与 .cjc-usermenu 面宽全仓零消费方，整族已撤", () => {
+  assert.doesNotMatch(cssCode, /\.cjc-act/)
+  assert.doesNotMatch(cssCode, /\.cjc-usermenu/)
+  assert.match(css, /\.cjc-menu \{ display: inline-flex; \}/)
+})
+
+test("R2/R3 中性件：卡上不落荧黄，状态章的色只作第二编码（文字编码有兜底）", () => {
+  const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+  assert.doesNotMatch(code, /--ow-beacon|--ow-accent-dot|#FFD23E/)
+  assert.match(source, /const STATUS_FALLBACK_LABEL: Record<ScheduledTaskCardStatus\["key"\], string>/)
+})

package/src/components/domain/tasks/ScheduledTaskCardView/index.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import { useState } from "react"
+import { BeaconSpinner } from "../../../composite/BeaconSpinner"
+import * as I2 from "../../../composite/Icons"
+import { RowOverflowMenu } from "../../../composite/RowOverflowMenu"
+
+export interface ScheduledTaskCardStatus {
+  key: "paused" | "running" | "done" | "failed" | "none"
+  label: string
+}
+
+export interface ScheduledTaskCardViewModel {
+  id: string
+  name: string
+  prompt: string
+  scheduleLabel: string
+  nextLabel: string
+  paused: boolean
+  status: ScheduledTaskCardStatus
+}
+
+/**
+ * W3-4 · §4 R1 双编码兜底：状态章的颜色永远是第二编码，文字编码必须在场。
+ * 上游对 `none`（从未运行）常传空 `label`，卡脚就一个字都不剩、圆章里也没有字形，
+ * 颜色会变成唯一编码——这里按 key 兜一句中文，`label` 有值时仍以上游为准。
+ */
+const STATUS_FALLBACK_LABEL: Record<ScheduledTaskCardStatus["key"], string> = {
+  running: "运行中",
+  done: "上次成功",
+  failed: "上次失败",
+  paused: "已暂停",
+  none: "从未运行",
+}
+
+export interface ScheduledTaskCardViewProps {
+  task: ScheduledTaskCardViewModel
+  onOpen: () => void
+  onEdit: () => void
+  onToggle: () => Promise<void>
+  onDelete: () => void
+}
+
+export function ScheduledTaskCardView({
+  task,
+  onOpen,
+  onEdit,
+  onToggle,
+  onDelete,
+}: ScheduledTaskCardViewProps): React.ReactElement {
+  const statusLabel = task.status.label || STATUS_FALLBACK_LABEL[task.status.key] || ""
+  return (
+    <div className={`cronjob-card${task.paused ? " paused" : ""}`} onClick={onOpen}>
+      <div className="cjc-top">
+        <span className={`cjc-dot ${task.status.key}`}>
+          {/* §9 旋转圈退役：卡片状态槽的 .spin → BeaconSpinner size=16，与同槽 svg 齐平
+              （§7 图标档位 16/20/24——原 13 与同槽 svg 一起出档，一并归 16）。
+              W3-4：22px 圆形保留（Terry 待裁口径「保留圆形、只统一颜色语法」），
+              底改 tint 档 + on-tint 图形色（见 desktop-surfaces.css .cjc-dot），
+              R1 的文字编码由卡脚 .cjc-stat 的 statusLabel 承担、none 档有兜底文案。 */}
+          {task.status.key === "running" && <BeaconSpinner size={16} />}
+          {task.status.key === "done" && <I2.Check />}
+          {task.status.key === "paused" && <I2.Pause />}
+          {task.status.key === "failed" && <I2.Close />}
+        </span>
+        <span className="cjc-name">{task.name || "未命名任务"}</span>
+        <span className="cjc-freq">{task.scheduleLabel}</span>
+      </div>
+      <div className="cjc-prompt">{task.prompt || "—"}</div>
+      <div className="cjc-foot">
+        <span className="cjc-next">
+          <I2.Clock /> {task.nextLabel}
+        </span>
+        {statusLabel && (
+          <>
+            <span className="cjc-sep">·</span>
+            <span className={`cjc-stat ${task.status.key}`}>{statusLabel}</span>
+          </>
+        )}
+        <span className="cjc-spacer" />
+        <ScheduledTaskCardMenu paused={task.paused} onEdit={onEdit} onToggle={onToggle} onDelete={onDelete} />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 行末更多操作 —— W5：原来是「铅笔图标当更多钮」＋ 自造 portal（硬编码 zIndex: 501
+ * ＋ 自绘 backdrop ＋ 手算 top/bottom）。两处都归位：图标换 More（§7 图标语义——
+ * 铅笔是「编辑」，一个装着编辑/暂停/删除三项的菜单不该拿它当把手），弹层走
+ * `RowOverflowMenu` 配方（Menu 基座负责 portal、fixed 定位、外点关闭、Esc 归位、
+ * 键盘导航与 §5 popover 立面与 z 档；ghost·sm 触发器＝28×28，§7 控件高在表内）。
+ * 卡片整张可点开详情，所以菜单外面包一层吞掉冒泡，免得点菜单顺手也开了详情。
+ */
+function ScheduledTaskCardMenu({
+  paused,
+  onEdit,
+  onToggle,
+  onDelete,
+}: Omit<ScheduledTaskCardViewProps, "task" | "onOpen"> & { paused: boolean }): React.ReactElement {
+  const [toggling, setToggling] = useState(false)
+
+  const select = (key: string) => {
+    if (key === "edit") onEdit()
+    else if (key === "delete") onDelete()
+    else if (key === "toggle" && !toggling) {
+      setToggling(true)
+      void onToggle().finally(() => setToggling(false))
+    }
+  }
+
+  return (
+    <span
+      className="cjc-menu"
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      <RowOverflowMenu
+        width={180}
+        disabled={toggling}
+        ariaLabel="更多操作"
+        items={[
+          { key: "edit", label: "编辑配置", icon: <I2.Edit /> },
+          {
+            key: "toggle",
+            label: toggling ? "更新中…" : paused ? "恢复计划" : "暂停计划",
+            icon: paused ? <I2.Play /> : <I2.Pause />,
+          },
+          { key: "delete", label: "删除任务", icon: <I2.Trash />, danger: true },
+        ]}
+        onSelect={select}
+      />
+    </span>
+  )
+}

package/src/components/domain/tasks/ScheduledTaskDeleteDialog/ScheduledTaskDeleteDialog.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ScheduledTaskDeleteDialog } from "./index"
+
+const meta = {
+  title: "Tasks/ScheduledTaskDeleteDialog",
+  component: ScheduledTaskDeleteDialog,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ScheduledTaskDeleteDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    taskName: "每日数据备份",
+    onCancel: () => console.log("cancel"),
+    onConfirm: () => console.log("confirm"),
+  },
+}
+
+export const Deleting: Story = {
+  args: {
+    taskName: "每周报告生成",
+    deleting: true,
+    onCancel: () => console.log("cancel"),
+    onConfirm: () => console.log("confirm"),
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    taskName: "自动部署任务",
+    error: "删除失败：任务正在运行中",
+    onCancel: () => console.log("cancel"),
+    onConfirm: () => console.log("confirm"),
+  },
+}
+
+export const LongTaskName: Story = {
+  args: {
+    taskName: "生产环境数据库定期备份与日志归档清理任务",
+    onCancel: () => console.log("cancel"),
+    onConfirm: () => console.log("confirm"),
+  },
+}
+
+export const EmptyTaskName: Story = {
+  args: {
+    taskName: "",
+    onCancel: () => console.log("cancel"),
+    onConfirm: () => console.log("confirm"),
+  },
+}

package/src/components/domain/tasks/ScheduledTaskDeleteDialog/ScheduledTaskDeleteDialogSource.test.mjs

@@ -0,0 +1,35 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+
+/** 只在「代码」上验禁令：注释里点名旧写法是文档，不是用法。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+// ── W5 残留清扫：自造 modal-host 退役，整件迁到 Dialog 基座 ──
+
+test("§5 立面：走 Dialog 基座的 danger 变体，自造遮罩/毛玻璃/圆角/影全部退场", () => {
+  assert.match(source, /import \{ Dialog \} from "\.\.\/\.\.\/\.\.\/composite\/Dialog"/)
+  assert.match(source, /<Dialog\s+open\s+variant="danger"/)
+  assert.doesNotMatch(code, /data-slot="modal-host"/)
+  assert.doesNotMatch(code, /createPortal/)
+  assert.doesNotMatch(code, /bg-ow-bg-overlay|backdrop-blur/)
+  // §7/§2：圆角与影子取语义 token（由基座给），不再写原生工具类
+  assert.doesNotMatch(code, /rounded-2xl|shadow-ow-shadow-3/)
+})
+
+test("§7 形状：48px rounded-full 红圆章退场——头部图标章随基座落 8px 行动档方章", () => {
+  assert.doesNotMatch(code, /rounded-full/)
+  assert.doesNotMatch(code, /w-12 h-12/)
+  assert.match(source, /icon=\{<Trash \/>\}/)
+})
+
+test("动作区走 Dialog 的 actions 槽；删除进行中连取消一起锁住", () => {
+  assert.match(source, /actions=\{[\s\S]*?<Button variant="secondary" type="button" disabled=\{deleting\}/)
+  assert.match(source, /<Button variant="danger" type="button" loading=\{deleting\} disabled=\{deleting\}/)
+})
+
+test("§6 错误态：删除失败一句人话走 InlineMessage error tint 三件套", () => {
+  assert.match(source, /<InlineMessage variant="error">\{error\}<\/InlineMessage>/)
+})

package/src/components/domain/tasks/ScheduledTaskDeleteDialog/index.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import { Dialog } from "../../../composite/Dialog"
+import { Trash } from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+
+/**
+ * ScheduledTaskDeleteDialog —— 删除定时任务的破坏性确认。
+ *
+ * 立面全部落在 `Dialog` 基座的 `danger` 变体上（§5：`--ow-scrim` 遮罩 ＋
+ * `--ow-shadow-modal` ＋ 1px 边框，圆角 `--ow-radius-modal`，z 取 `--ow-z-modal`；
+ * Escape 关闭、Tab 焦点圈闭环、关闭后焦点还给触发元素）。原先这里自造
+ * `data-slot="modal-host"`（`bg-ow-bg-overlay` ＋ `backdrop-blur-sm`、`rounded-2xl`、
+ * `shadow-ow-shadow-3`）＋ 48px `rounded-full` 红圆章 ＋ 手排动作行——同簇
+ * `SkillImportDialogView` 的头注释早已宣告这套自造壳整体退役。
+ *
+ * §7 形状：头部图标章随 Dialog 走 8px 行动档方章（999 只留给带状态点/计数的 chip
+ * 与真圆件，一枚 48 圆形红章两样都不是）；圆角/影子改由 `--ow-radius-modal` /
+ * `--ow-shadow-modal` 语义 token 承担，不再写 `rounded-2xl` / `shadow-ow-shadow-3`
+ * 这类原生工具类。动作区走 Dialog 的 actions 便捷档（取消 ＋ danger 确认）。
+ * §6 错误态：删除失败一句人话走 `InlineMessage` error tint 三件套。
+ * R3 中性件——不带信标/荧黄元素。
+ */
+export interface ScheduledTaskDeleteDialogProps {
+  taskName: string
+  deleting?: boolean
+  error?: string | null
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export function ScheduledTaskDeleteDialog({
+  taskName,
+  deleting = false,
+  error,
+  onCancel,
+  onConfirm,
+}: ScheduledTaskDeleteDialogProps): React.ReactElement {
+  return (
+    <Dialog
+      open
+      variant="danger"
+      icon={<Trash />}
+      title="删除定时任务"
+      closable={false}
+      closeOnOverlayClick={!deleting}
+      closeOnEscape={!deleting}
+      onClose={onCancel}
+      /* 用 actions 槽而不是 onConfirm 便捷档：删除进行中要连「取消」一起锁住
+         （便捷档的取消钮不接 disabled）。 */
+      actions={
+        <>
+          <Button variant="secondary" type="button" disabled={deleting} onClick={onCancel}>
+            取消
+          </Button>
+          <Button variant="danger" type="button" loading={deleting} disabled={deleting} onClick={onConfirm}>
+            {deleting ? "删除中…" : "删除"}
+          </Button>
+        </>
+      }
+    >
+      <p className="m-0">
+        确定要删除「{taskName || "未命名任务"}」吗？该任务的排程与运行记录将被移除，此操作无法撤销。
+      </p>
+      {error && (
+        <div data-ow-part="error" className="mt-3">
+          <InlineMessage variant="error">{error}</InlineMessage>
+        </div>
+      )}
+    </Dialog>
+  )
+}

package/src/components/domain/tasks/ScheduledTaskDetailView/ScheduledTaskDetailView.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ScheduledTaskDetailModel, ScheduledTaskRunViewModel } from "./index"
+import { ScheduledTaskDetailView } from "./index"
+
+const meta = {
+  title: "Tasks/ScheduledTaskDetailView",
+  component: ScheduledTaskDetailView,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ScheduledTaskDetailView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const baseTask: ScheduledTaskDetailModel = {
+  name: "每日代码审查",
+  scheduleLabel: "0 9 * * *",
+  nextRunLabel: "明天 09:00",
+  statusKey: "waiting",
+  statusLabel: "等待中",
+  modelName: "claude-sonnet",
+  projectName: "orbit-fe",
+  notifyTargetLabel: "研发频道",
+  paused: false,
+  promptPreview: <p>检查昨天合并的所有 PR，汇总潜在问题并生成审查报告，发送到团队频道。</p>,
+}
+
+const runs: ScheduledTaskRunViewModel[] = [
+  {
+    id: "run-3",
+    turnLabel: "3",
+    statusKey: "running",
+    statusLabel: "运行中",
+    when: "今天 09:00",
+    summary: "正在审查 4 个 PR…",
+    sessionId: "s-3",
+  },
+  {
+    id: "run-2",
+    turnLabel: "2",
+    statusKey: "done",
+    statusLabel: "成功",
+    when: "昨天 09:00",
+    summary: "审查了 6 个 PR，发现 2 个潜在问题，报告已发送。",
+    sessionId: "s-2",
+  },
+  {
+    id: "run-1",
+    turnLabel: "1",
+    statusKey: "failed",
+    statusLabel: "失败",
+    when: "前天 09:00",
+    summary: "拉取仓库超时，任务中止。",
+    sessionId: "s-1",
+  },
+]
+
+const handlers = {
+  onBack: () => {},
+  onRunNow: () => {},
+  onEdit: () => {},
+  onToggle: () => {},
+  onDelete: () => {},
+  onLoadMoreRuns: () => {},
+  onOpenSession: (_sessionId: string) => {},
+}
+
+export const Default: Story = {
+  args: { task: baseTask, runs, ...handlers },
+}
+
+export const RunningNow: Story = {
+  args: {
+    task: { ...baseTask, statusKey: "running", statusLabel: "运行中" },
+    runs,
+    runningNow: true,
+    ...handlers,
+  },
+}
+
+export const Paused: Story = {
+  args: {
+    task: { ...baseTask, paused: true, statusKey: "paused", statusLabel: "已暂停" },
+    runs: runs.slice(1),
+    ...handlers,
+  },
+}
+
+export const EmptyRuns: Story = {
+  args: {
+    task: { ...baseTask, statusKey: "waiting", statusLabel: "等待首次触发" },
+    runs: [],
+    ...handlers,
+  },
+}
+
+export const HasMoreRuns: Story = {
+  args: { task: baseTask, runs, hasMoreRuns: true, ...handlers },
+}
+
+export const LoadingMoreRuns: Story = {
+  args: { task: baseTask, runs, hasMoreRuns: true, loadingMoreRuns: true, ...handlers },
+}
+
+export const RunPageError: Story = {
+  args: {
+    task: baseTask,
+    runs,
+    hasMoreRuns: true,
+    runPageError: "网络请求超时",
+    ...handlers,
+  },
+}
+
+export const WithoutNotifyTarget: Story = {
+  args: {
+    task: { ...baseTask, notifyTargetLabel: undefined, promptPreview: undefined },
+    runs: runs.slice(1),
+    ...handlers,
+  },
+}