@orbit-work/ui 0.1.0

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

@@ -0,0 +1,526 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ScheduledTasksSpaceView } from "./index"
+
+const meta: Meta<typeof ScheduledTasksSpaceView> = {
+  title: "Tasks/ScheduledTasksSpaceView",
+  component: ScheduledTasksSpaceView,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof ScheduledTasksSpaceView>
+
+/**
+ * W3-4 · §4 R1：示例卡的状态章原来是 --ow-success 实底 + --ow-on-fill 白字
+ * （已暂停档还直接吃了原语 --ow-gray-00，违 §2 语义优先）。这里与 .cjc-dot / .cd-stat
+ * 同步归位到 tint 档——运行中＝success-tint + success-on-tint，已暂停＝中性井底 + text-2。
+ * 注：这只是 SpaceView 的布局占位卡；真卡骨架见 ScheduledTaskCardView。
+ */
+const SampleTaskCards = () => (
+  <>
+    <div
+      style={{
+        padding: 16,
+        background: "var(--ow-surface)",
+        borderRadius: 12,
+        border: "1px solid var(--ow-border)",
+      }}
+    >
+      <div style={{ fontWeight: 600, color: "var(--ow-text)", marginBottom: 8 }}>每日代码审查</div>
+      <div style={{ fontSize: 13, color: "var(--ow-text-3)", marginBottom: 4 }}>每天上午 9:00 执行</div>
+      <div
+        style={{
+          display: "inline-block",
+          padding: "2px 8px",
+          background: "var(--ow-success-tint)",
+          color: "var(--ow-success-on-tint)",
+          borderRadius: 4,
+          fontSize: 12,
+        }}
+      >
+        运行中
+      </div>
+    </div>
+    <div
+      style={{
+        padding: 16,
+        background: "var(--ow-surface)",
+        borderRadius: 12,
+        border: "1px solid var(--ow-border)",
+      }}
+    >
+      <div style={{ fontWeight: 600, color: "var(--ow-text)", marginBottom: 8 }}>周报生成</div>
+      <div style={{ fontSize: 13, color: "var(--ow-text-3)", marginBottom: 4 }}>每周五下午 5:00 执行</div>
+      <div
+        style={{
+          display: "inline-block",
+          padding: "2px 8px",
+          background: "var(--ow-surface-2)",
+          color: "var(--ow-text-2)",
+          borderRadius: 4,
+          fontSize: 12,
+        }}
+      >
+        已暂停
+      </div>
+    </div>
+    <div
+      style={{
+        padding: 16,
+        background: "var(--ow-surface)",
+        borderRadius: 12,
+        border: "1px solid var(--ow-border)",
+      }}
+    >
+      <div style={{ fontWeight: 600, color: "var(--ow-text)", marginBottom: 8 }}>性能监控</div>
+      <div style={{ fontSize: 13, color: "var(--ow-text-3)", marginBottom: 4 }}>每小时执行</div>
+      <div
+        style={{
+          display: "inline-block",
+          padding: "2px 8px",
+          background: "var(--ow-success-tint)",
+          color: "var(--ow-success-on-tint)",
+          borderRadius: 4,
+          fontSize: 12,
+        }}
+      >
+        运行中
+      </div>
+    </div>
+  </>
+)
+
+export const WithTasks: Story = {
+  args: {
+    activeCount: 2,
+    totalCount: 3,
+    loading: false,
+    hasTasks: true,
+    taskCards: <SampleTaskCards />,
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const EmptyState: Story = {
+  args: {
+    activeCount: 0,
+    totalCount: 0,
+    loading: false,
+    hasTasks: false,
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const LoadingEmpty: Story = {
+  args: {
+    activeCount: 0,
+    totalCount: 0,
+    loading: true,
+    hasTasks: false,
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const LoadingWithTasks: Story = {
+  args: {
+    activeCount: 2,
+    totalCount: 3,
+    loading: true,
+    hasTasks: true,
+    taskCards: <SampleTaskCards />,
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const ErrorEmpty: Story = {
+  args: {
+    activeCount: 0,
+    totalCount: 0,
+    loading: false,
+    error: "无法连接到服务器",
+    hasTasks: false,
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const ErrorWithTasks: Story = {
+  args: {
+    activeCount: 2,
+    totalCount: 3,
+    loading: false,
+    error: "刷新任务列表失败",
+    hasTasks: true,
+    taskCards: <SampleTaskCards />,
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const NoActiveTasks: Story = {
+  args: {
+    activeCount: 0,
+    totalCount: 5,
+    loading: false,
+    hasTasks: true,
+    taskCards: (
+      <>
+        {Array.from({ length: 5 }, (_, i) => (
+          <div
+            key={i}
+            style={{
+              padding: 16,
+              background: "var(--ow-surface)",
+              borderRadius: 12,
+              border: "1px solid var(--ow-border)",
+            }}
+          >
+            <div style={{ fontWeight: 600, color: "var(--ow-text)", marginBottom: 8 }}>任务 {i + 1}</div>
+            <div style={{ fontSize: 13, color: "var(--ow-text-3)", marginBottom: 4 }}>已暂停的任务</div>
+            <div
+              style={{
+                display: "inline-block",
+                padding: "2px 8px",
+                background: "var(--ow-surface-2)",
+                color: "var(--ow-text-2)",
+                borderRadius: 4,
+                fontSize: 12,
+              }}
+            >
+              已暂停
+            </div>
+          </div>
+        ))}
+      </>
+    ),
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const AllActiveTasks: Story = {
+  args: {
+    activeCount: 4,
+    totalCount: 4,
+    loading: false,
+    hasTasks: true,
+    taskCards: (
+      <>
+        {Array.from({ length: 4 }, (_, i) => (
+          <div
+            key={i}
+            style={{
+              padding: 16,
+              background: "var(--ow-surface)",
+              borderRadius: 12,
+              border: "1px solid var(--ow-border)",
+            }}
+          >
+            <div style={{ fontWeight: 600, color: "var(--ow-text)", marginBottom: 8 }}>活动任务 {i + 1}</div>
+            <div style={{ fontSize: 13, color: "var(--ow-text-3)", marginBottom: 4 }}>正在运行的任务</div>
+            <div
+              style={{
+                display: "inline-block",
+                padding: "2px 8px",
+                background: "var(--ow-success-tint)",
+                color: "var(--ow-success-on-tint)",
+                borderRadius: 4,
+                fontSize: 12,
+              }}
+            >
+              运行中
+            </div>
+          </div>
+        ))}
+      </>
+    ),
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const ManyTasks: Story = {
+  args: {
+    activeCount: 8,
+    totalCount: 12,
+    loading: false,
+    hasTasks: true,
+    taskCards: (
+      <>
+        {Array.from({ length: 12 }, (_, i) => (
+          <div
+            key={i}
+            style={{
+              padding: 16,
+              background: "var(--ow-surface)",
+              borderRadius: 12,
+              border: "1px solid var(--ow-border)",
+            }}
+          >
+            <div style={{ fontWeight: 600, color: "var(--ow-text)", marginBottom: 8 }}>任务 {i + 1}</div>
+            <div style={{ fontSize: 13, color: "var(--ow-text-3)", marginBottom: 4 }}>
+              {i % 3 === 0 ? "每天执行" : i % 3 === 1 ? "每周执行" : "每小时执行"}
+            </div>
+            <div
+              style={{
+                display: "inline-block",
+                padding: "2px 8px",
+                background: i < 8 ? "var(--ow-success-tint)" : "var(--ow-surface-2)",
+                color: i < 8 ? "var(--ow-success-on-tint)" : "var(--ow-text-2)",
+                borderRadius: 4,
+                fontSize: 12,
+              }}
+            >
+              {i < 8 ? "运行中" : "已暂停"}
+            </div>
+          </div>
+        ))}
+      </>
+    ),
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const SingleTask: Story = {
+  args: {
+    activeCount: 1,
+    totalCount: 1,
+    loading: false,
+    hasTasks: true,
+    taskCards: (
+      <div
+        style={{
+          padding: 16,
+          background: "var(--ow-surface)",
+          borderRadius: 12,
+          border: "1px solid var(--ow-border)",
+        }}
+      >
+        <div style={{ fontWeight: 600, color: "var(--ow-text)", marginBottom: 8 }}>每日备份</div>
+        <div style={{ fontSize: 13, color: "var(--ow-text-3)", marginBottom: 4 }}>每天凌晨 2:00 执行</div>
+        <div
+          style={{
+            display: "inline-block",
+            padding: "2px 8px",
+            background: "var(--ow-success-tint)",
+            color: "var(--ow-success-on-tint)",
+            borderRadius: 4,
+            fontSize: 12,
+          }}
+        >
+          运行中
+        </div>
+      </div>
+    ),
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const WithDialog: Story = {
+  args: {
+    activeCount: 2,
+    totalCount: 3,
+    loading: false,
+    hasTasks: true,
+    taskCards: <SampleTaskCards />,
+    dialogs: (
+      <div
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: "rgba(0, 0, 0, 0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <div
+          style={{
+            background: "var(--ow-bg)",
+            padding: 24,
+            borderRadius: 12,
+            border: "1px solid var(--ow-border)",
+            minWidth: 400,
+          }}
+        >
+          <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 16 }}>新建定时任务</div>
+          <div style={{ color: "var(--ow-text-3)" }}>对话框内容...</div>
+        </div>
+      </div>
+    ),
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const LongErrorMessage: Story = {
+  args: {
+    activeCount: 0,
+    totalCount: 0,
+    loading: false,
+    error: "连接超时：无法访问本地服务器 localhost:3000，请检查服务是否正常运行并重试",
+    hasTasks: false,
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const NetworkError: Story = {
+  args: {
+    activeCount: 2,
+    totalCount: 3,
+    loading: false,
+    error: "网络错误",
+    hasTasks: true,
+    taskCards: <SampleTaskCards />,
+    onCreate: () => console.log("Create task"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+      <div style={{ height: 500, border: "1px solid var(--ow-border)" }}>
+        <ScheduledTasksSpaceView
+          activeCount={0}
+          totalCount={0}
+          loading={false}
+          hasTasks={false}
+          onCreate={() => console.log("Create")}
+          onRetry={() => console.log("Retry")}
+        />
+      </div>
+      <div style={{ height: 500, border: "1px solid var(--ow-border)" }}>
+        <ScheduledTasksSpaceView
+          activeCount={2}
+          totalCount={3}
+          loading={false}
+          hasTasks={true}
+          taskCards={<SampleTaskCards />}
+          onCreate={() => console.log("Create")}
+          onRetry={() => console.log("Retry")}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const LoadingStates: Story = {
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
+      <div style={{ height: 400, border: "1px solid var(--ow-border)" }}>
+        <ScheduledTasksSpaceView
+          activeCount={0}
+          totalCount={0}
+          loading={true}
+          hasTasks={false}
+          onCreate={() => console.log("Create")}
+          onRetry={() => console.log("Retry")}
+        />
+      </div>
+      <div style={{ height: 400, border: "1px solid var(--ow-border)" }}>
+        <ScheduledTasksSpaceView
+          activeCount={2}
+          totalCount={3}
+          loading={true}
+          hasTasks={true}
+          taskCards={<SampleTaskCards />}
+          onCreate={() => console.log("Create")}
+          onRetry={() => console.log("Retry")}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const ErrorStates: Story = {
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
+      <div style={{ height: 400, border: "1px solid var(--ow-border)" }}>
+        <ScheduledTasksSpaceView
+          activeCount={0}
+          totalCount={0}
+          loading={false}
+          error="加载失败"
+          hasTasks={false}
+          onCreate={() => console.log("Create")}
+          onRetry={() => console.log("Retry")}
+        />
+      </div>
+      <div style={{ height: 400, border: "1px solid var(--ow-border)" }}>
+        <ScheduledTasksSpaceView
+          activeCount={2}
+          totalCount={3}
+          loading={false}
+          error="刷新失败"
+          hasTasks={true}
+          taskCards={<SampleTaskCards />}
+          onCreate={() => console.log("Create")}
+          onRetry={() => console.log("Retry")}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const TaskCounts: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <div style={{ height: 300, border: "1px solid var(--ow-border)" }}>
+        <ScheduledTasksSpaceView
+          activeCount={0}
+          totalCount={1}
+          loading={false}
+          hasTasks={true}
+          taskCards={
+            <div
+              style={{
+                padding: 16,
+                background: "var(--ow-surface)",
+                borderRadius: 12,
+                border: "1px solid var(--ow-border)",
+              }}
+            >
+              任务 1
+            </div>
+          }
+          onCreate={() => console.log("Create")}
+          onRetry={() => console.log("Retry")}
+        />
+      </div>
+      <div style={{ height: 300, border: "1px solid var(--ow-border)" }}>
+        <ScheduledTasksSpaceView
+          activeCount={5}
+          totalCount={10}
+          loading={false}
+          hasTasks={true}
+          taskCards={<SampleTaskCards />}
+          onCreate={() => console.log("Create")}
+          onRetry={() => console.log("Retry")}
+        />
+      </div>
+      <div style={{ height: 300, border: "1px solid var(--ow-border)" }}>
+        <ScheduledTasksSpaceView
+          activeCount={20}
+          totalCount={20}
+          loading={false}
+          hasTasks={true}
+          taskCards={<SampleTaskCards />}
+          onCreate={() => console.log("Create")}
+          onRetry={() => console.log("Retry")}
+        />
+      </div>
+    </div>
+  ),
+}

package/src/components/domain/tasks/ScheduledTasksSpaceView/ScheduledTasksSpaceViewSource.test.mjs

@@ -0,0 +1,85 @@
+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, "")
+const decls = css.replace(/\/\*[\s\S]*?\*\//g, "")
+
+test("§6 / G5：无任务空态走 primitives/EmptyState，56px Clock 图标筐退役", () => {
+  assert.ok(source.includes('import { EmptyState } from "../../../primitives/EmptyState"'))
+  assert.match(source, /<EmptyState\s+className="cron-empty"/)
+  assert.doesNotMatch(source, /className="ce-ic"/)
+  assert.doesNotMatch(css, /\.cron-empty \.ce-ic/)
+})
+
+test("A5-B3：整栏空态落 page 一级形制——标题＋副句拆两层，母题 52×32 归档位表", () => {
+  assert.match(code, /<EmptyState\s+className="cron-empty"\s+size="page"/)
+  assert.match(code, /title="还没有定时任务"/)
+  assert.match(code, /message="把每天都要做的事交出去：到点它自己开一段会话，跑完通知你。"/)
+  // 三件信息塌成一句的旧文案退役
+  assert.doesNotMatch(code, /还没有定时任务。创建一个/)
+})
+
+test("空态第二入口与页头主钮同一形制：primary 实底、不带图标（图标只留页头钮）", () => {
+  assert.match(code, /actionLabel="新建任务"\s+actionVariant="primary"\s+onAction=\{onCreate\}/)
+  // 原型空态 CTA 不带图标，图标只留给页头钮
+  assert.doesNotMatch(code, /action=\{\s*<Button variant="primary" icon=\{<Plus \/>\}/)
+  // 页头那枚仍是行动极（A3-B3 起文案随原型 L1741 收成「新建任务」）
+  assert.match(source, /<Button variant="primary" icon=\{<Plus \/>\} onClick=\{onCreate\}>\s*新建任务/)
+})
+
+// R2：三态原本只迁走了空态——载态与错误态还是手排的 .ce-t（600 字重标题）＋ .ce-s
+// （text-3 副行）老三件，错误态还把技术原文用 sans 摊在正文里。§6 口径：
+// 载＝小转子 ＋ 一句 text-2；错＝InlineMessage（人话一句 ＋ 折叠 mono 详情 ＋ 重试）。
+test("载/错两态归 §6：BeaconSpinner 16 ＋ 一句话 / InlineMessage 人话＋mono 详情", () => {
+  assert.match(source, /<BeaconSpinner size=\{16\} \/>/)
+  assert.match(source, /import \{ InlineMessage \} from "\.\.\/\.\.\/\.\.\/primitives\/InlineMessage"/)
+  assert.match(source, /<InlineMessage\s+variant="error"\s+detail=\{error\}/)
+  assert.match(source, /定时任务没加载出来。/)
+  // 老三件类钩整族退场
+  assert.doesNotMatch(source, /className="ce-t"/)
+  assert.doesNotMatch(source, /className="ce-s"/)
+  assert.doesNotMatch(css, /\.cron-empty \.ce-t/)
+  assert.doesNotMatch(css, /\.cron-empty \.ce-s/)
+  // A5-B3：`.cron-empty` 已无任何声明——版心全交回 EmptyState 的 page 档位表，
+  // 类名只作调用点/e2e 的定位钩子；再叠一条 padding 就会把上留白顶成 96+56。
+  assert.doesNotMatch(decls, /\.cron-empty\s*\{/)
+})
+
+test("R3 中性件：空态母题不占极，全件无荧黄硬编码", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|#FFD23E/)
+})
+
+// ── W5 残留清扫：页头留白与网格骨架归 2.0 列表页 ──
+
+// ── A3-B3：页首归 composite/PageHead（原型 template.dc.html L1731–1740） ─────
+
+test("A3-B3：三行页头一件收，48 上留白的 .files__head 头带与彩色图标章一起退役", () => {
+  assert.match(source, /import \{ PageHead \} from "\.\.\/\.\.\/\.\.\/composite\/PageHead"/)
+  assert.match(source, /<PageHead\s+eyebrow="自动化"\s+title="定时任务"/)
+  assert.match(source, /description="按计划自己跑起来的任务；每次运行都会开一段新会话。"/)
+  // 头带整条撤：上留白 48 → 24 由 PageHead 的 pt-6 给（窗口带是内容区之外的独立一行）
+  assert.doesNotMatch(source, /className="files__head"/)
+  assert.doesNotMatch(decls, /\.cron-space \.files__head/)
+  // 40×40 info-tint 彩色图标章：本页是它最后一处消费方，随页头一起撤，CSS 整条删
+  assert.doesNotMatch(code, /desktop-page-head__icon/)
+  assert.doesNotMatch(decls, /\.desktop-page-head__icon/)
+  // .cron-head__* 一族留着——二级页 ScheduledTaskDetailView 还在用
+  assert.match(css, /\.cron-head__title \{/)
+})
+
+test("A3-B3：读数改句尾一段 mono caption「N 个任务」，并列多段退役", () => {
+  assert.match(source, /meta=\{`\$\{totalCount\} 个任务`\}/)
+  assert.doesNotMatch(code, /个进行中/)
+  assert.doesNotMatch(code, /<span className="mono">/)
+})
+
+test("A3-B3：滚动体 20/28/28、网格列宽随原型收到 340", () => {
+  assert.match(css, /\.cron-scroll \{[^}]*padding: 20px 28px 28px;/)
+  assert.match(css, /\.cron-grid \{[^}]*grid-template-columns: repeat\(auto-fill, minmax\(min\(340px, 100%\), 1fr\)\);/)
+  assert.doesNotMatch(css, /\.cron-grid \{[^}]*repeat\(3, 1fr\)/)
+})