@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopSiteReleasesView/DesktopSiteReleasesView.stories.tsx

@@ -0,0 +1,369 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { type ReactNode, useEffect, useRef } from "react"
+import { Globe, Pause, Trash } from "../../../composite/Icons"
+import type { DesktopSiteItem } from "./DesktopSitesListView"
+import { DesktopSiteReleasesView } from "./index"
+import type { DesktopSiteReleaseItem } from "./index"
+
+const meta = {
+  title: "Desktop/DesktopSiteReleasesView",
+  component: DesktopSiteReleasesView,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof DesktopSiteReleasesView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockSite: DesktopSiteItem = {
+  id: "site-1",
+  name: "产品文档",
+  status: "SITE_STATUS_ACTIVE",
+  version: 12,
+  baseUrl: "https://docs.example.com",
+  publishedAt: "2026-08-20T10:30:00Z",
+}
+
+const mockReleases: DesktopSiteReleaseItem[] = [
+  {
+    id: "rel-1",
+    version: 12,
+    status: "SITE_RELEASE_STATUS_PUBLISHED",
+    fileCount: 48,
+    totalSizeBytes: 2458624,
+    publishedAt: "2026-08-20T10:30:00Z",
+    createdAt: "2026-08-20T10:28:00Z",
+  },
+  {
+    id: "rel-2",
+    version: 11,
+    status: "SITE_RELEASE_STATUS_PUBLISHED",
+    fileCount: 45,
+    totalSizeBytes: 2234880,
+    publishedAt: "2026-08-18T14:22:00Z",
+    createdAt: "2026-08-18T14:20:00Z",
+  },
+  {
+    id: "rel-3",
+    version: 10,
+    status: "SITE_RELEASE_STATUS_FAILED",
+    fileCount: 0,
+    totalSizeBytes: 0,
+    failureReason: "上传超时",
+    createdAt: "2026-08-15T09:10:00Z",
+  },
+  {
+    id: "rel-4",
+    version: 9,
+    status: "SITE_RELEASE_STATUS_PUBLISHED",
+    fileCount: 42,
+    totalSizeBytes: 2109440,
+    sourceReleaseId: "rel-8",
+    publishedAt: "2026-08-14T16:45:00Z",
+    createdAt: "2026-08-14T16:43:00Z",
+  },
+  {
+    id: "rel-5",
+    version: 8,
+    status: "SITE_RELEASE_STATUS_CANCELED",
+    fileCount: 0,
+    totalSizeBytes: 0,
+    createdAt: "2026-08-13T11:20:00Z",
+  },
+  {
+    id: "rel-6",
+    version: 7,
+    status: "SITE_RELEASE_STATUS_PUBLISHED",
+    fileCount: 40,
+    totalSizeBytes: 1998848,
+    publishedAt: "2026-08-12T08:15:00Z",
+    createdAt: "2026-08-12T08:13:00Z",
+  },
+]
+
+export const Default: Story = {
+  args: {
+    site: mockSite,
+    releases: mockReleases,
+    loading: false,
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    site: mockSite,
+    releases: [],
+    loading: true,
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const Error: Story = {
+  args: {
+    site: mockSite,
+    releases: [],
+    loading: false,
+    error: "网络连接失败，无法获取发布记录",
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    site: {
+      ...mockSite,
+      version: 0,
+      status: "SITE_STATUS_DRAFT",
+      baseUrl: undefined,
+      publishedAt: undefined,
+    },
+    releases: [],
+    loading: false,
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const DraftSite: Story = {
+  args: {
+    site: {
+      id: "site-2",
+      name: "新站点",
+      status: "SITE_STATUS_DRAFT",
+      version: 1,
+      baseUrl: undefined,
+    },
+    releases: [
+      {
+        id: "rel-1",
+        version: 1,
+        status: "SITE_RELEASE_STATUS_PENDING_UPLOAD",
+        fileCount: 0,
+        totalSizeBytes: 0,
+        createdAt: "2026-08-27T10:00:00Z",
+      },
+    ],
+    loading: false,
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const DisabledSite: Story = {
+  args: {
+    site: {
+      ...mockSite,
+      status: "SITE_STATUS_DISABLED",
+    },
+    releases: mockReleases.slice(0, 3),
+    loading: false,
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const WithPublishing: Story = {
+  args: {
+    site: mockSite,
+    releases: [
+      {
+        id: "rel-new",
+        version: 13,
+        status: "SITE_RELEASE_STATUS_PUBLISHING",
+        fileCount: 50,
+        totalSizeBytes: 2621440,
+        createdAt: "2026-08-27T11:30:00Z",
+      },
+      ...mockReleases,
+    ],
+    loading: false,
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const ManyReleases: Story = {
+  args: {
+    site: mockSite,
+    releases: Array.from({ length: 15 }, (_, i) => ({
+      id: `rel-${i}`,
+      version: 15 - i,
+      status:
+        i === 0
+          ? "SITE_RELEASE_STATUS_PUBLISHED"
+          : i % 5 === 0
+            ? "SITE_RELEASE_STATUS_FAILED"
+            : "SITE_RELEASE_STATUS_PUBLISHED",
+      fileCount: 40 + i,
+      totalSizeBytes: 2000000 + i * 50000,
+      failureReason: i % 5 === 0 ? "构建失败" : undefined,
+      publishedAt: i % 5 === 0 ? undefined : new Date(Date.now() - i * 86400000).toISOString(),
+      createdAt: new Date(Date.now() - i * 86400000).toISOString(),
+    })),
+    loading: false,
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const WithRollback: Story = {
+  args: {
+    site: mockSite,
+    releases: [
+      {
+        id: "rel-1",
+        version: 12,
+        status: "SITE_RELEASE_STATUS_PUBLISHED",
+        fileCount: 42,
+        totalSizeBytes: 2109440,
+        sourceReleaseId: "rel-10",
+        publishedAt: "2026-08-27T10:30:00Z",
+        createdAt: "2026-08-27T10:28:00Z",
+      },
+      {
+        id: "rel-2",
+        version: 11,
+        status: "SITE_RELEASE_STATUS_FAILED",
+        fileCount: 0,
+        totalSizeBytes: 0,
+        failureReason: "依赖项缺失",
+        createdAt: "2026-08-26T14:20:00Z",
+      },
+      {
+        id: "rel-3",
+        version: 10,
+        status: "SITE_RELEASE_STATUS_PUBLISHED",
+        fileCount: 42,
+        totalSizeBytes: 2109440,
+        publishedAt: "2026-08-25T09:15:00Z",
+        createdAt: "2026-08-25T09:13:00Z",
+      },
+    ],
+    loading: false,
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+/**
+ * 宿主追加的 ⋯ 菜单项（R2 · L3-2-12 补）：`menuItems` / `onMenuSelect` 是批3 加的扩展位，
+ * 在这之前全仓零消费方、零 story——重名 key、danger 项与内置项混排的次序都没看过图。
+ *
+ * 这张锁住三件事：① 本件自带的「刷新发布记录」永远排第一；② 宿主项按传入顺序接在后面；
+ * ③ danger 项（删除）走 `--ow-danger` 文字色，排在最后、与前面的常规项之间没有额外分隔线。
+ * 原型 L2014 给的宿主三项就是「发布 / 取消发布 / 删除」，这里照它 seed。
+ *
+ * **宿主一期还没接线**（`SkillsCenter` 那两处 menuItems 是给 `SkillDetailView` 的，与本件无关），
+ * 交接单第九节按「待宿主接线的空接口」记，不当成已验收能力。
+ */
+export const WithHostMenuItems: Story = {
+  args: {
+    site: mockSite,
+    releases: mockReleases,
+    loading: false,
+    menuItems: [
+      { key: "publish", label: "发布", icon: <Globe /> },
+      { key: "unpublish", label: "取消发布", icon: <Pause /> },
+      { key: "delete", label: "删除站点", icon: <Trash />, danger: true },
+    ],
+    onMenuSelect: (key: string) => console.log("host menu:", key),
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+/** 宿主项里含禁用态（发布中不许再发）：禁用项不可点、不参与键盘游走。 */
+export const WithDisabledHostMenuItem: Story = {
+  args: {
+    site: { ...mockSite, status: "SITE_STATUS_DRAFT" },
+    releases: mockReleases,
+    loading: false,
+    menuItems: [
+      { key: "publish", label: "发布", icon: <Globe />, disabled: true },
+      { key: "delete", label: "删除站点", icon: <Trash />, danger: true },
+    ],
+    onMenuSelect: (key: string) => console.log("host menu:", key),
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+/**
+ * ⋯ 菜单**开态**（R2 · L3-2-12 的正题）：上面两张只证明 props 收得下，混排的次序要把菜单
+ * 打开才看得见。这张挂载后自动点开 ⋯，图里可核三件事：
+ * ① 本件自带的「刷新发布记录」排第一；② 宿主三项按传入顺序接在后面；
+ * ③ danger 的「删除站点」走 `--ow-danger` 文字色，与前面的常规项之间没有额外分隔线。
+ */
+export const HostMenuItemsOpen: Story = {
+  args: {
+    site: mockSite,
+    releases: mockReleases,
+    loading: false,
+    menuItems: [
+      { key: "publish", label: "发布", icon: <Globe /> },
+      { key: "unpublish", label: "取消发布", icon: <Pause /> },
+      { key: "delete", label: "删除站点", icon: <Trash />, danger: true },
+    ],
+    onMenuSelect: (key: string) => console.log("host menu:", key),
+    onBack: () => console.log("Back"),
+    onEdit: () => console.log("Edit"),
+    onManage: () => console.log("Manage"),
+    onPreviewSite: () => console.log("Preview"),
+    onRetry: () => console.log("Retry"),
+  },
+  render: (args) => (
+    <AutoOpenOverflow>
+      <DesktopSiteReleasesView {...args} />
+    </AutoOpenOverflow>
+  ),
+}
+
+/** 挂载后点一次页头的 ⋯ 触发器——菜单开合是件内私有交互态，不点就出不了图。 */
+function AutoOpenOverflow({ children }: { children: ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      ref.current?.querySelector<HTMLButtonElement>('button[aria-label="更多操作"]')?.click()
+    }, 0)
+    return () => window.clearTimeout(timer)
+  }, [])
+  return <div ref={ref}>{children}</div>
+}

package/src/components/domain/desktop/DesktopSiteReleasesView/DesktopSiteReleasesViewSource.test.mjs

@@ -0,0 +1,123 @@
+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 styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("site release history covers loading, error, empty and populated states", () => {
+  /* DS2 P6：三态归口 DataTable —— loading=骨架行 · error=一句人话＋mono 详情 · empty=EmptyState */
+  assert.match(source, /loading=\{loading\}/)
+  assert.match(source, /loadingRows=\{3\}/)
+  assert.match(source, /error=\{error \? "暂时无法加载发布记录" : undefined\}/)
+  assert.match(source, /errorDetail=\{error \?\? undefined\}/)
+  assert.match(source, /emptyMessage="该站点完成首次发布后，版本记录会显示在这里。"/)
+  assert.match(source, /onClick=\{onRetry\}/)
+  assert.match(source, /release\.failureReason/)
+})
+
+test("site release history presents release metadata and pagination", () => {
+  assert.match(source, /release\.fileCount/)
+  assert.match(source, /formatBytes\(release\.totalSizeBytes\)/)
+  assert.match(source, /formatDate\(release\.publishedAt \|\| release\.createdAt\)/)
+  assert.match(source, /<Pagination/)
+  assert.match(source, /pageSize=\{PAGE_SIZE\}/)
+})
+
+test("release readouts run mono via DataTable numeric columns", () => {
+  /* §7 读数：版本号 / 发布时间 / 文件数 / 体积一律 mono + tabular-nums（numeric 列自带） */
+  const columns = source.match(/const RELEASE_COLUMNS[\s\S]*?\n\]\n/)?.[0] ?? ""
+  for (const key of ["version", "publishedAt", "fileCount", "totalSizeBytes"]) {
+    const column = columns.match(new RegExp(`key: "${key}"[\\s\\S]*?\\n  \\},`))?.[0] ?? ""
+    assert.match(column, /numeric: true/, `${key} column must be a numeric (mono) column`)
+  }
+  // A4-B5：版本读数从「当前 v3 · 已发布 · 地址」那句混排里挪进页头的 mono 地址行
+  assert.match(source, /<span className="site-releases__addr-ver">v\{site\.version\}<\/span>/)
+  assert.match(styles, /\.site-releases__addr \{[^}]*var\(--ow-font-mono\)[^}]*tabular-nums/)
+  // R2：mono 只包数字，「第」「页」留在正文字族（原来整句连汉字一起进等宽）
+  assert.match(
+    source,
+    /第 <span className="mono">\{currentPage\}<\/span> \/ <span className="mono">\{totalPages\}<\/span> 页/,
+  )
+  assert.match(styles, /\.site-releases__pagination \.mono \{[^}]*var\(--ow-font-mono\)/)
+  // R2：事实卡的值全是读数——mono 由 SiteFact 一处给（原来靠每个字段自己传 mono，漏传就
+  // 让同一个值在表格里等宽、在卡里黑体）；「站点地址」字段已随页头重排退役。
+  assert.match(source, /<SiteFact label="最近发布时间" value=\{formatDate\(site\.publishedAt\)\} \/>/)
+  assert.match(source, /<div className="v mono">\{value\}<\/div>/)
+  assert.match(styles, /\.site-releases__fact \.v\.mono \{[^}]*var\(--ow-font-mono\)[^}]*tabular-nums/)
+})
+
+test("release and site status badges carry the R1 dot plus label", () => {
+  // 表格行里的发布状态仍是 Badge（点形＋文案）
+  assert.match(source, /<Badge variant=\{status\.variant\} dot>/)
+  // A4-B5：页头那枚站点状态改用 composite/StatusTag——同屏的卡与目录详情用的是同一枚签，
+  // Badge 与 StatusTag 并存会在同一屏出现两种高度/圆角的状态标（R1 双编码仍在：tint 面 ＋ 文字）
+  assert.match(source, /<StatusTag tone=\{currentSiteStatus\.tone\}>\{currentSiteStatus\.label\}<\/StatusTag>/)
+  assert.doesNotMatch(source, /<Badge variant=\{currentSiteStatus/)
+})
+
+test("site release history follows the scheduled task detail layout", () => {
+  /* DS2 P4：返回钮归口 composite/BackButton（ghost + chevron），旧 .ch-ic--back 蓝底方块已废止 */
+  // A4-B5：返回条文案照原型 L4491「返回工作台 · 站点」（上一级页已改名工作台）
+  assert.match(source, /<BackButton onClick=\{onBack\}>\{backLabel\}<\/BackButton>/)
+  assert.doesNotMatch(source, /ch-ic--back/)
+  // A4-B5：一张大卡套 2×2 字段格 → 原型 L2034 的 auto-fit 事实卡
+  assert.match(source, /site-releases__facts/)
+  assert.doesNotMatch(source, /site-releases__summary/)
+  assert.doesNotMatch(styles, /^\s*\.site-releases__summary/m)
+  assert.match(source, /site-releases__section-label/)
+  /* DS2 P6：发布记录归口 DataTable，旧手写 .site-releases__list / .site-release-row 族已废止 */
+  assert.match(source, /<DataTable\b/)
+  assert.doesNotMatch(source, /site-releases__list/)
+  assert.doesNotMatch(source, /site-release-row/)
+  /* 只认选择器（行首），废止注释里提到旧类名不算残留 */
+  assert.doesNotMatch(styles, /^\s*\.site-release-row/m)
+  assert.doesNotMatch(styles, /^\s*\.site-releases__list/m)
+  // A4-B5：页头块 20/28/0（同 .skd__head 与 PageHead 的 24/28/0 一族）——窗口带是内容区
+  // 之外的独立一行，页头不再用 --ow-titlebar-h(48) 替它让位；下内距交给滚动区的上内距。
+  assert.match(styles, /\.site-releases__head \{[^}]*padding: 20px 28px 0;/)
+  assert.doesNotMatch(styles, /\.site-releases__head\s*\{[^}]*44px/)
+  assert.match(styles, /\.site-releases__scroll \{[^}]*padding: 20px 28px 28px;/)
+  // 事实卡既定态：1px --ow-border（不是 --ow-border-strong）+ 卡片档圆角
+  assert.match(
+    styles,
+    /\.site-releases__fact \{[^}]*border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);[^}]*border-radius: var\(--ow-radius-card\);/,
+  )
+})
+
+test("site detail exposes management and editing actions", () => {
+  assert.match(source, /onManage: \(\) => void/)
+  assert.match(source, /onEdit: \(\) => void/)
+  assert.doesNotMatch(source, /managementOpen/)
+  assert.doesNotMatch(source, /managementContent/)
+  // A4-B5：页头三颗同档次级钮（原型 L2003–2013 是三颗纯文字次级钮，无图标、无主钮）——
+  // 「编辑」原来是实底主钮，与旁边的「管理」只差一次误点；改状态的动作收进 ⋯。
+  assert.match(
+    source,
+    /<Button variant="secondary" onClick=\{onPreviewSite\} disabled=\{!available\}>\s*预览\s*<\/Button>/,
+  )
+  assert.match(source, /<Button variant="secondary" onClick=\{onManage\}>\s*管理\s*<\/Button>/)
+  assert.match(source, /<Button variant="secondary" onClick=\{onEdit\} disabled=\{!site\.sessionId\}>\s*编辑\s*<\/Button>/)
+  assert.doesNotMatch(source, /variant="primary"/)
+  assert.match(source, /<DetailOverflowMenu items=\{overflowItems\} onSelect=\{handleMenuSelect\} \/>/)
+})
+
+test("A4-B5：地址行是可复制的中性 mono，不再是蓝色链接（原型 L1996–2000）", () => {
+  assert.match(source, /onPreviewSite: \(\) => void/)
+  // 预览只剩页头那一颗钮；地址本身改成「复制链接」，点它不再跳转
+  assert.equal(source.match(/onClick=\{onPreviewSite\}/g)?.length, 1)
+  assert.match(source, /className="site-releases__addr-copy"/)
+  assert.match(source, /aria-label=\{`复制站点 \$\{site\.name\} 的链接`\}/)
+  assert.match(source, /\{copied \? <Check aria-hidden="true" \/> : <Copy aria-hidden="true" \/>\}/)
+  assert.match(source, /还没发布 · 没有链接/)
+  const addrCopy = styles.match(/\.site-releases__addr-copy \{[^}]*\}/)?.[0] ?? ""
+  assert.match(addrCopy, /border: 0;/)
+  assert.match(addrCopy, /background: transparent;/)
+  /* §4：地址是这页的机读身份串，不是一处召唤——去蓝（--ow-link）改 --ow-text-2，
+     可点性由 hover 的 --ow-hover 底表达；--ow-link 只留给设置里那族列表副行。 */
+  assert.match(addrCopy, /color: var\(--ow-text-2\);/)
+  assert.doesNotMatch(addrCopy, /--ow-link/)
+  assert.match(styles, /\.site-releases__addr-copy:hover \{[^}]*background: var\(--ow-hover\);/)
+  assert.match(styles, /\.site-releases__addr-copy:focus-visible/)
+  assert.doesNotMatch(styles, /^\s*\.site-releases__url-link/m)
+})