@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopSitesListView/DesktopSitesListViewSource.test.mjs

@@ -0,0 +1,198 @@
+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("sites page primary action matches the scheduled tasks action size", () => {
+  assert.match(
+    source,
+    /<Button variant=["']primary["'] icon=\{<Plus \/>} onClick=\{onCreateSite\}>\s*新建站点\s*<\/Button>/,
+  )
+  assert.doesNotMatch(source, /<Button[^>]*\bonClick=\{onCreateSite\}[^>]*\bsize=["']sm["'][^>]*>/)
+  assert.doesNotMatch(source, /<Button[^>]*\bsize=["']sm["'][^>]*\bonClick=\{onCreateSite\}[^>]*>/)
+})
+
+// ── A3-B3：页首归 composite/PageHead（原型 template.dc.html L1865–1903） ──────
+
+test("A3-B3：三行页头一件收，13px 小标题与 V1 彩色图标章都不复存在", () => {
+  assert.match(source, /import \{ PageHead \} from ["']\.\.\/\.\.\/\.\.\/composite\/PageHead["']/)
+  assert.match(source, /<PageHead\s+eyebrow="产物"\s+title="工作台"/)
+  assert.match(source, /description="会话里产出的站点、图片与文档都在这里发布与管理。"/)
+  assert.doesNotMatch(source, /desktop-page-head__icon/)
+  // 13px/600 的 .sites-space__title 一族（含 __title-row / __subtitle / __toolbar / __search）整族退役
+  assert.doesNotMatch(source, /sites-space__title/)
+  assert.doesNotMatch(source, /sites-space__subtitle/)
+  assert.doesNotMatch(source, /sites-space__toolbar/)
+  assert.doesNotMatch(styles, /\.sites-space__(?:head|title|title-row|subtitle|toolbar|search) /)
+})
+
+test("A3-B3：载 / 错 / 常规三态共用同一个页头实例，态一换标题不再跳", () => {
+  assert.match(source, /const head = \(\s*<PageHead/)
+  // 三处渲染点都是 {head}，不再各写一段小标题
+  assert.equal(source.match(/^\s*\{head\}$/gm)?.length, 3)
+})
+
+test("A3-B3：页签＝内容分段（站点/媒体库/档案馆）；R2 L1-3-5 起页签行右端只剩「密集」", () => {
+  assert.match(source, /const WORKBENCH_TABS[\s\S]*\{ key: "sites", label: "站点" \}/)
+  assert.match(source, /\{ key: "media", label: "媒体库", disabled: true, title: "还没开放" \}/)
+  assert.match(source, /\{ key: "archive", label: "档案馆", disabled: true, title: "还没开放" \}/)
+  // R2 L1-3-5：原型 L1889 写死「三段都没有分类维度」，L1896–1901 那行只有页签 ＋ 密集钮。
+  // 「全部 / 已发布 / 草稿」这枚 Select 整枚撤（状态已由卡封面的 StatusTag 说过一遍），
+  // 连同 FILTER_OPTIONS / SiteFilter / filter 状态一并退役——它是件内 useState，宿主无对应 prop。
+  assert.doesNotMatch(source, /sites-space__filter/)
+  assert.doesNotMatch(source, /FILTER_OPTIONS/)
+  assert.doesNotMatch(source, /SiteFilter/)
+  assert.doesNotMatch(source, /import \{ Select \}/)
+  assert.match(source, /tabsExtra=\{\s*<>\s*\{\/\* 密集开关/)
+  assert.doesNotMatch(source, /const FILTER_TABS/)
+  assert.doesNotMatch(source, /import \{ Tabs \}/)
+})
+
+test("A3-B3：滚动体 20/28/28、列宽 340、gap 14 —— 与插件/定时任务三屏同一档", () => {
+  assert.match(styles, /\.sites-grid \{[^}]*padding: 20px 28px 28px;[^}]*minmax\(340px, 1fr\)\);[^}]*gap: 14px;/s)
+})
+
+test("R2：容器错态归口 primitives/InlineMessage，手写错态块退役", () => {
+  // 同簇 DesktopWorkspaceView 两处错态已是 InlineMessage variant="error"（人话一句 ＋ mono 详情 ＋ 重试）；
+  // 本页原是手写的 AlertCircle + strong + span + 重试钮，三种容器错态三套写法。
+  assert.match(source, /<InlineMessage\n\s+variant="error"/)
+  assert.doesNotMatch(source, /published-sites__state--error/)
+  assert.doesNotMatch(source, /<AlertCircle \/>/)
+})
+
+test("site cards keep details and in-app URL preview as separate actions", () => {
+  assert.match(source, /onViewDetails: \(site: DesktopSiteItem\) => void/)
+  assert.match(source, /onPreviewSite: \(site: DesktopSiteItem\) => void/)
+  assert.match(source, /<article key=\{site\.id\} className="site-card">/)
+  // 描述位恒在，一排卡等高不靠数据凑齐
+  assert.match(source, /<div className="site-card__desc">\{site\.description\}<\/div>/)
+  assert.match(source, /className="site-card__open(?:\s[^"]*)?"/)
+  assert.match(source, /data-ow-part="site-open"/)
+  assert.match(source, /onClick=\{\(\) => onViewDetails\(site\)\}/)
+  assert.doesNotMatch(source, /site-card__actions/)
+  assert.doesNotMatch(source, />\s*详情\s*<\/Button>/)
+  /* A4-B5：卡脚右下那枚 28 高动作钮接管「打开链接」（原型 L1943 / L4445：pub ? 打开链接 : 预览）。
+     原来这个动作挂在卡脚整宽的蓝色地址行上——地址既是读数又是按钮，还占掉两行卡脚。 */
+  assert.match(source, /className="site-card__act"/)
+  assert.match(source, /data-ow-part="site-act"/)
+  assert.match(source, /\{canOpen \? "打开链接" : "预览"\}/)
+  assert.match(source, /onClick=\{\(\) => onPreviewSite\(site\)\}/)
+  assert.match(source, /aria-label=\{canOpen \? `在应用内预览站点 \$\{site\.name\}` : undefined\}/)
+  assert.doesNotMatch(source, /site-card__url/)
+  assert.doesNotMatch(source, /<button[^>]*className="site-card"/)
+})
+
+test("A4-B5：封面按比例给（原型产物卡 L1910），不再是写死的 150px 高", () => {
+  assert.match(styles, /\.site-card__open\s*\{[^}]*width:\s*100%;[^}]*align-items:\s*stretch;/)
+  /* 标准态 16:9、密集态 1:1（原型 L4425 随列宽 340→236 一起切）；本批只留槽，开关排后续批次。
+     写死高度的卡在任何一档列宽下都会变成另一个比例。 */
+  assert.match(styles, /\.site-card__cover\s*\{[^}]*aspect-ratio:\s*var\(--site-cover-ratio, 16 \/ 9\);/)
+  assert.doesNotMatch(styles, /\.site-card__cover\s*\{[^}]*150px/)
+  assert.match(styles, /\.sites-grid \{ --site-cover-ratio: 16 \/ 9;/)
+  /* 比例封面的配套：行高不写死时 Chrome 按「最小内容贡献」给隐式行定尺，比例盒在那一趟里
+     按更窄的宽度折算高度（实测行高 265.6 对卡真高 335，第二排压进第一排 56px）。 */
+  assert.match(styles, /\.sites-grid \{[^}]*grid-auto-rows: max-content;/)
+  assert.match(
+    styles,
+    /\.sites-grid--dense \{ --site-cover-ratio: 1 \/ 1; grid-template-columns: repeat\(auto-fill, minmax\(236px, 1fr\)\);/,
+  )
+})
+
+test("site card uses a centered cover image when cover URL is available and keeps the thumb fallback", () => {
+  assert.match(source, /coverUrl\?: string/)
+  assert.match(source, /site\.coverUrl \? \(/)
+  assert.match(source, /className="site-card__cover-image"/)
+  assert.match(source, /src=\{site\.coverUrl\}/)
+  assert.match(source, /:\s*\(\s*<SiteThumbPreview \/>/)
+  /* 封面是比例盒（无固定高），封面图要 absolute 填满才不塌成内容高 */
+  assert.match(
+    styles,
+    /\.site-card__cover-image\s*\{[^}]*position:\s*absolute;[^}]*inset:\s*0;[^}]*width:\s*100%;[^}]*height:\s*100%;[^}]*object-fit:\s*cover;/,
+  )
+})
+
+test("site card preview uses low-saturation semantic theme colors", () => {
+  /* P6-8 渐变清剿后封面底是平色（§5 无渐变），两档同值不再要 dark 覆盖；
+     A4-B5 底从嵌套井 --ow-surface-2 换成衬垫 --ow-mat（原型 L1910）——封面装的是
+     「别人的页面」，是摆在垫子上的对象，不是本页的输入井。 */
+  const coverStyle = styles.match(/\.site-card__cover\s*\{[^}]*\}/)?.[0] ?? ""
+  assert.match(coverStyle, /background:\s*var\(--ow-mat\);/)
+  assert.doesNotMatch(coverStyle, /gradient/)
+  assert.match(styles, /\.site-card__thumb\s*\{[^}]*background:\s*var\(--ow-surface\);/)
+  assert.doesNotMatch(coverStyle, /#[0-9a-f]{3,8}/i)
+})
+
+test("A4-B5：缩略图是 74% 居中的三条灰杠，不占任何一极（原型 L1911–1917）", () => {
+  /* 改前是铺满封面的浏览器窗框（导航条＋首字字标＋CTA＋三块特性卡，九条 CSS）：
+     垫色只剩 14px 一圈边，--ow-mat 等于白改。整族退役，只留原型的那张小示意。 */
+  assert.doesNotMatch(styles, /\.site-card__mock/)
+  assert.doesNotMatch(source, /SiteMockPreview|site-card__mock/)
+  assert.match(styles, /\.site-card__thumb \{ width: 74%;[^}]*background: var\(--ow-surface\);/)
+  /* §4：灰杠是装饰摆样，一律 --ow-text-3 按不透明度分主次；原字标吃 --ow-primary-bg、
+     CTA 吃 --ow-primary，暗档下是黄底黄字与一条实心荧黄。 */
+  const bar = styles.match(/\.site-card__thumb-bar \{[^}]*\}/)?.[0] ?? ""
+  assert.match(bar, /background: var\(--ow-text-3\)/)
+  assert.doesNotMatch(styles, /\.site-card__thumb[^{\n]*\{[^}]*var\(--ow-primary/)
+})
+
+test("site card readouts and status follow DS2 P6", () => {
+  /* §7 读数：文件数 / 体积 / 版本号 / 相对时间一行 mono（原型 L1939 的卡脚左段）；
+     R1：状态角标 tint 面 ＋ 文字。A4-B5 起状态签归 composite/StatusTag —— 原来是
+     primitives/Badge（点形 ＋ 另一套高度），与同屏目录卡的状态签形不同。 */
+  assert.match(source, /<StatusTag className="site-card__status" tone=\{status\.tone\}>/)
+  assert.doesNotMatch(source, /<Badge/)
+  assert.match(source, /\{ label: "已上线", tone: "ok" \}/)
+  assert.match(source, /\{ label: "草稿", tone: "mute" \}/)
+  assert.match(styles, /\.site-card__status \{[^}]*position: absolute;[^}]*top: 10px; right: 10px;/)
+  assert.match(styles, /\.site-card__meta \{[^}]*var\(--ow-font-mono\)[^}]*tabular-nums/)
+  /* §4：卡上不再有蓝色地址链接——卡上唯一的可点落点是右下那枚动作钮，
+     地址搬到详情页头的 mono 行里（带复制）。 */
+  assert.doesNotMatch(styles, /^\s*\.site-card__url/m)
+  assert.doesNotMatch(styles, /^\s*\.site-card__(?:version|time|draft-hint|skel-url) /m)
+  /* 卡 hover 禁位移（§9） */
+  assert.doesNotMatch(styles, /\.site-card[^{\n]*\{[^}]*translateY/)
+})
+
+test("A4-B5：卡内两段与 A4-B2 的目录卡同表（原型 L1933–1944）", () => {
+  /* 体 12/14/0 · 字段槽 4；名 500/14；描述 --ow-text-2 且 min-height:3em（一排卡等高的关键） */
+  assert.match(styles, /\.site-card__body \{[^}]*gap: var\(--ow-space-1, 4px\);[^}]*padding: 12px 14px 0;/)
+  assert.match(styles, /\.site-card__name \{[^}]*font: 500 var\(--ow-fs-body\)\/1\.3/)
+  assert.match(styles, /\.site-card__desc \{[^}]*color: var\(--ow-text-2\);[^}]*min-height: 3em;/)
+  /* 载态骨架与内容态同高：骨架的描述位借 .site-card__skel-desc 复现 min-height:3em
+     （实测两态卡高同为 335；不设的话骨架矮 30） */
+  assert.match(styles, /\.site-card__skel-desc \{[^}]*font-size: var\(--ow-fs-ui\); min-height: 3em;/)
+  /* 卡脚一行两件：margin-top:auto 顶住卡底、gap 10、12/14 内距 */
+  assert.match(
+    styles,
+    /\.site-card__footer \{ margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; \}/,
+  )
+})
+
+// ── A3-B4 密集开关（原型 L1898 ＋ 口径 L4425） ──────────────────────────────
+test("A3-B4：密集开关落在页签行右端，接列宽 340↔236 与封面 16:9↔1:1", () => {
+  // 开关本体：Button secondary sm（28 高 ＋ 1px 边），按下态由 aria-pressed 承载，
+  // 标签恒为「密集」——不在同一枚钮上既写当前态又写点了会变成什么。
+  assert.match(source, /className="sites-space__dense"/)
+  assert.match(source, /aria-pressed=\{dense\}/)
+  assert.match(source, /icon=\{<Grid \/>\}/)
+  // 受控优先、不受控自记（纯前端状态；是否持久化归研发）
+  assert.match(source, /dense\?: boolean/)
+  assert.match(source, /onDenseChange\?: \(dense: boolean\) => void/)
+  assert.match(source, /const dense = denseProp \?\? denseState/)
+  // 载态与内容态共用同一个网格类名，密集态两态同时生效
+  assert.match(source, /const gridClassName = dense \? "sites-grid sites-grid--dense" : "sites-grid"/)
+  assert.doesNotMatch(source, /className="sites-grid"/)
+  // 按下态＝--ow-current-bg 面 ＋ 500 字重（R1 双编码，位置极语汇；不占状态极）
+  assert.match(
+    styles,
+    /\.sites-space__dense\[aria-pressed="true"\] \{[^}]*background: var\(--ow-current-bg\);[^}]*font-weight: 500;/s,
+  )
+  // 密集态三件：列宽 236、封面 1/1、说明与主动作收掉
+  assert.match(styles, /\.sites-grid--dense \{[^}]*--site-cover-ratio: 1 \/ 1;[^}]*minmax\(236px, 1fr\)\);/s)
+  assert.match(
+    styles,
+    /\.sites-grid--dense \.site-card__desc, \.sites-grid--dense \.site-card__act \{ display: none; \}/,
+  )
+})

package/src/components/domain/desktop/DesktopSitesListView/index.tsx

@@ -0,0 +1,417 @@
+"use client"
+
+import { useLayoutEffect, useRef, useState } from "react"
+import { CatalogEmptyState } from "../../../composite/CatalogStates"
+import { Grid, Plus, Refresh } from "../../../composite/Icons"
+import { PageHead } from "../../../composite/PageHead"
+import { SearchInput } from "../../../composite/SearchInput"
+import { Skeleton } from "../../../composite/Skeleton"
+import { StatusTag, type StatusTagTone } from "../../../composite/StatusTag"
+import { Button } from "../../../primitives"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+
+export interface DesktopSiteItem {
+  id: string
+  name: string
+  status: string
+  baseUrl: string
+  coverUrl?: string
+  version: number
+  publishedAt?: string
+  createdAt?: string
+  sessionId: string
+  description?: string
+  /**
+   * 卡脚 mono 元信息的两个读数（原型产物卡 L1939：「12 个文件 · 1.8 MB」）。
+   * 站点列表 RPC 目前不带这两项（只有发布记录带），所以是可选的：拿不到就退回
+   * 「v3 · 1 小时前」这组本来就有的读数，卡脚永远有一行、不留空。
+   */
+  fileCount?: number
+  totalSizeBytes?: number
+}
+
+export interface DesktopSitesListViewProps {
+  sites: DesktopSiteItem[]
+  loading: boolean
+  error?: string | null
+  onCreateSite: () => void
+  onViewDetails: (site: DesktopSiteItem) => void
+  onPreviewSite: (site: DesktopSiteItem) => void
+  onRetry: () => void
+  /**
+   * 密集态（A3-B4，原型 L1898 开关 ＋ L4425 口径：列宽 340→236、封面 16:9→1:1、
+   * 说明与主动作收掉）。不传＝本件自己记（纯前端状态）；宿主要持久化就传这一对受控属性。
+   */
+  dense?: boolean
+  onDenseChange?: (dense: boolean) => void
+  query?: string
+  onQueryChange?: (query: string) => void
+  onOpenShares?: () => void
+  hasMore?: boolean
+  onLoadMore?: () => void
+  scrollTop?: number
+  onScrollTopChange?: (top: number) => void
+}
+
+/**
+ * A3-B3：页签位让给**内容分段**（原型 WB_TABS L3419「站点 / 媒体库 / 档案馆」），
+ * 状态筛选从页签降级成页签行右端的一枚下拉——页签是「看哪一类产物」，
+ * 状态是「看这一类里的哪一批」，两者不是同一个维度，不该抢同一排位置。
+ * 媒体库与档案馆一期无数据线（研发未开发），置灰占位，鼠标悬停给一句「还没开放」；
+ * 出而不通，是为了让「统一且固定的标题 + 页签」这套结构一眼可见。
+ */
+const WORKBENCH_TABS = [
+  { key: "sites", label: "站点" },
+  { key: "media", label: "媒体库", disabled: true, title: "还没开放" },
+  { key: "archive", label: "档案馆", disabled: true, title: "还没开放" },
+]
+
+/**
+ * 状态角标（原型 L4441：`pub ? '已上线' : '草稿'`，两档＝success tint / 中性面）。
+ * A4-B5 把 `primitives/Badge`（带点形、另一套高度）换成 `composite/StatusTag`——
+ * 同屏的目录卡、详情页头用的都是这一枚 20 高 · radius-xs · 11px 的签。
+ * 我们比原型多两档：已停用（站点还在但不对外，warn）与未知（mute）。
+ */
+function statusTag(status: string): { label: string; tone: StatusTagTone } {
+  if (status === "SITE_STATUS_ACTIVE") return { label: "已上线", tone: "ok" }
+  if (status === "SITE_STATUS_DRAFT") return { label: "草稿", tone: "mute" }
+  if (status === "SITE_STATUS_DISABLED") return { label: "已停用", tone: "warn" }
+  return { label: "未知", tone: "mute" }
+}
+
+/** 体积读数：与发布记录表的「体积」列同一套换算，卡脚与详情页不会一个 MB 一个 M。 */
+function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B"
+  const units = ["B", "KB", "MB", "GB"]
+  const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+  const value = bytes / 1024 ** index
+  return `${value >= 10 || index === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[index]}`
+}
+
+/**
+ * 卡脚左侧那一行 mono 元信息。原型是「12 个文件 · 1.8 MB」；本页的列表数据暂时只有
+ * 版本与时间，所以按可得性降级——两者都不会同时缺，卡脚不会空着（见 fileCount 注）。
+ *
+ * R2 L3-1-8：降级判据从「任一项存在就不再补版本/时间」改成「**两项都齐**才独占卡脚」。
+ * 原来只给 fileCount 一项时，版本与时间会被整条吞掉，卡脚只剩「12 个文件」半句。
+ */
+function cardMeta(site: DesktopSiteItem): string {
+  const parts: string[] = []
+  if (typeof site.fileCount === "number") parts.push(`${site.fileCount} 个文件`)
+  if (typeof site.totalSizeBytes === "number") parts.push(formatBytes(site.totalSizeBytes))
+  if (parts.length < 2) {
+    parts.push(`v${site.version}`)
+    const at = formatRelativeTime(site.publishedAt || site.createdAt)
+    if (at) parts.push(at)
+  }
+  return parts.join(" · ")
+}
+
+function formatRelativeTime(value?: string): string {
+  if (!value) return ""
+  try {
+    const date = new Date(value)
+    const now = new Date()
+    const diff = now.getTime() - date.getTime()
+    if (diff < 60_000) return "刚刚"
+    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`
+    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`
+    if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)} 天前`
+    return date.toLocaleDateString("zh-CN")
+  } catch {
+    return ""
+  }
+}
+
+function isActive(site: DesktopSiteItem) {
+  return site.status === "SITE_STATUS_ACTIVE"
+}
+
+/** Sites space page view — a standalone top-level page for managing published sites. */
+export function DesktopSitesListView({
+  sites,
+  loading,
+  error,
+  onCreateSite,
+  onViewDetails,
+  onPreviewSite,
+  onRetry,
+  dense: denseProp,
+  onDenseChange,
+  query: queryProp,
+  onQueryChange,
+  onOpenShares,
+  hasMore = false,
+  onLoadMore,
+  scrollTop = 0,
+  onScrollTopChange,
+}: DesktopSitesListViewProps) {
+  const [queryState, setQueryState] = useState("")
+  const query = queryProp ?? queryState
+  const setQuery = (value: string) => {
+    if (queryProp === undefined) setQueryState(value)
+    onQueryChange?.(value)
+  }
+  const grid = useRef<HTMLDivElement>(null)
+  useLayoutEffect(() => {
+    if (grid.current) grid.current.scrollTop = scrollTop
+  }, [scrollTop])
+  /* 密集态：受控优先，不受控时本件自记。是否跨会话持久化归研发（写不写偏好）。 */
+  const [denseState, setDenseState] = useState(false)
+  const dense = denseProp ?? denseState
+  const gridClassName = dense ? "sites-grid sites-grid--dense" : "sites-grid"
+  const toggleDense = () => {
+    const next = !dense
+    if (denseProp === undefined) setDenseState(next)
+    onDenseChange?.(next)
+  }
+
+  const keyword = query.trim().toLowerCase()
+  /* R2 L1-3-5：页签行右端那枚「全部 ▾」状态筛选已撤（原型 L1889 的注释写死了口径——
+     「三段都没有分类维度」，L1896–1901 那一行里只有页签 ＋ 弹性空档 ＋ 一枚 26 高的「密集」）。
+     它给的信息卡封面右上的 StatusTag（已上线/草稿/已停用）已经说了一遍；filter 又是件内
+     useState、宿主没有对应 prop，撤掉不动接口。要筛就并进搜索框的关键词匹配。 */
+  let filtered = sites
+  if (keyword && queryProp === undefined) {
+    filtered = filtered.filter((site) =>
+      [site.name, site.description, site.baseUrl].some((f) => f?.toLowerCase().includes(keyword)),
+    )
+  }
+
+  /* A3-B3：三行页头一件收（原型 template.dc.html L1865–1903）。载 / 错 / 常规三态共用同一个
+     页头实例——原来三态各写一段「13px/600 站点」小标题，态一换标题就跳一次。
+     · 眉标「产物」／大标题「工作台」（裁决 17：一期先把站点改名工作台，路由 id 不动）；
+     · 搜索从原来的页签行右端提到页头右上（PageHead 统一锁 216 宽）；
+     · 主钮一期保留「新建站点」（原型是「在会话里新建」，改口径要接主页技能，归研发）；
+     · 页签＝内容分段（R2 L1-3-5：原来右端还有一枚状态筛选 Select，已撤——见 filtered 处注）；
+     · A3-B4：同一个槽里再落原型 L1898 那枚「密集」开关（列宽 340→236、封面 16:9→1:1、
+       说明与主动作收掉，规则在 `.sites-grid--dense`）。 */
+  const head = (
+    <PageHead
+      eyebrow="产物"
+      title="工作台"
+      description="会话里产出的站点、图片与文档都在这里发布与管理。"
+      search={<SearchInput value={query} onChange={setQuery} placeholder="搜索产物" />}
+      actions={
+        <>
+          {onOpenShares && (
+            <Button variant="ghost" onClick={onOpenShares}>
+              我的分享
+            </Button>
+          )}
+          <Button variant="primary" icon={<Plus />} onClick={onCreateSite}>
+            新建站点
+          </Button>
+        </>
+      }
+      tabs={WORKBENCH_TABS}
+      activeTabKey="sites"
+      tabsExtra={
+        <>
+          {/* 密集开关（原型 L1898）：跟页签同一行右端 —— 三段页签都没有分类维度，
+              不再单起一条只装它的空行。标签恒为「密集」，开没开由 aria-pressed ＋
+              `--ow-current-bg` 面 ＋ 500 字重三层一起说；原型让标签在「密集/标准」之间
+              翻字，那是把「当前态」和「点了会变成什么」写在同一枚钮上，按下态一亮就自相矛盾。 */}
+          <Button
+            type="button"
+            size="sm"
+            variant="secondary"
+            className="sites-space__dense"
+            icon={<Grid />}
+            aria-pressed={dense}
+            title={dense ? "回到标准视图" : "更密的排布：一屏多看一列，收起说明与动作"}
+            onClick={toggleDense}
+          >
+            密集
+          </Button>
+        </>
+      }
+    />
+  )
+
+  if (loading && sites.length === 0) {
+    return (
+      <div className="page sites-space">
+        {head}
+        {/* 载态骨架必须与内容态**同形同网格**：原来借的是技能广场那套
+            `.plaza__grid` + `CardGridSkeleton`（36 头像 ＋ 3 行 ＋ 72×28 钮，卡高 83），
+            而本页内容态是 `.sites-grid` + `.site-card`（16:9 封面 ＋ body ＋ 卡脚），
+            载→内容之间整块布局跳变（3 列 6 张矮卡 → 3 列 4 张高卡）。改成站点卡自己的骨架。 */}
+        <div className={gridClassName}>
+          <SiteCardSkeletonGrid />
+        </div>
+      </div>
+    )
+  }
+
+  if (error && sites.length === 0) {
+    return (
+      <div className="page sites-space">
+        {head}
+        {/* DS2 §6 容器错态一套写法：primitives/InlineMessage（一句人话 ＋ mono 详情 ＋ 重试），
+            与 DesktopWorkspaceView 两处错态同口径；原手写的错态块（图标＋strong＋span＋重试钮）已退役。 */}
+        <InlineMessage
+          variant="error"
+          title="暂时无法加载"
+          detail={error}
+          className="published-sites__error"
+          action={
+            <Button size="sm" variant="secondary" icon={<Refresh />} onClick={onRetry}>
+              重试
+            </Button>
+          }
+        >
+          站点列表这次没取回来，稍后重试或检查网络。
+        </InlineMessage>
+      </div>
+    )
+  }
+
+  return (
+    <div className="page sites-space">
+      {head}
+      {filtered.length === 0 ? (
+        /* R2 L2-1-4 ＋ L2-3-2：两态两档。
+           · 首次空态（无关键词）＝ §6 page 一级：母题 52 ＋ 标题 ＋ 副句 ＋ 一枚钮。
+             钮复用页头的 `onCreateSite`，按 §4 记账表降 secondary（页头那枚是同屏行动极）；
+             副句里原来那句「点右上角新建」随钮一并删——路标该是钮，不是一句话。
+           · 搜索无结果＝二级空态，显式 size="md"（母题 40 ＋ 一句 ＋「清空搜索」描边钮）。 */
+        <CatalogEmptyState
+          grid
+          size={keyword ? "md" : "page"}
+          title={keyword ? "没有找到匹配的站点" : "还没有站点"}
+          hint={
+            keyword
+              ? "换个关键词试试，或清空搜索查看全部站点。"
+              : "在对话里让专家产出页面，发布成站点后就会出现在这里。"
+          }
+          action={keyword ? undefined : { label: "新建站点", onClick: onCreateSite }}
+          onClearSearch={keyword ? () => setQuery("") : undefined}
+        />
+      ) : (
+        <div
+          ref={grid}
+          className={gridClassName}
+          onScroll={(event) => onScrollTopChange?.(event.currentTarget.scrollTop)}
+        >
+          {filtered.map((site) => {
+            const status = statusTag(site.status)
+            /* 卡上唯一的动作（原型 L4445：`pub ? '打开链接' : '预览'`）。我们没有本地草稿
+               预览通道，所以没链接时这枚钮禁用并写清原因——原型的目录卡也用同一档
+               `actOff` 表达「这一步现在做不了」。 */
+            const canOpen = isActive(site) && Boolean(site.baseUrl)
+            return (
+              <article key={site.id} className="site-card">
+                <Button
+                  type="button"
+                  data-ow-part="site-open"
+                  variant="unstyled"
+                  className="site-card__open ow-focus-ring"
+                  aria-label={`查看站点 ${site.name} 的详情`}
+                  onClick={() => onViewDetails(site)}
+                >
+                  <div className="site-card__cover">
+                    {site.coverUrl ? (
+                      <img className="site-card__cover-image" src={site.coverUrl} alt="" />
+                    ) : (
+                      <SiteThumbPreview />
+                    )}
+                    {/* R1 双编码：状态签是「tint 面 ＋ 文字」，色不单独承担信息 */}
+                    <StatusTag className="site-card__status" tone={status.tone}>
+                      {status.label}
+                    </StatusTag>
+                  </div>
+                  <div className="site-card__body">
+                    <div className="site-card__name">{site.name}</div>
+                    {/* 描述位恒在（原型 L1935 的 showDesc 只随密集态切）：条件渲染会让没有
+                        描述的卡比同排矮两行，min-height:3em 也就白设了。 */}
+                    <div className="site-card__desc">{site.description}</div>
+                  </div>
+                </Button>
+                <div className="site-card__footer">
+                  <span className="site-card__meta" title={site.baseUrl || undefined}>
+                    {cardMeta(site)}
+                  </span>
+                  <Button
+                    type="button"
+                    data-ow-part="site-act"
+                    size="sm"
+                    variant="secondary"
+                    className="site-card__act"
+                    disabled={!canOpen}
+                    title={canOpen ? site.baseUrl : "尚未发布，还没有可打开的链接"}
+                    aria-label={canOpen ? `在应用内预览站点 ${site.name}` : undefined}
+                    onClick={() => onPreviewSite(site)}
+                  >
+                    {canOpen ? "打开链接" : "预览"}
+                  </Button>
+                </div>
+              </article>
+            )
+          })}
+          {(hasMore || error) && (
+            <div className="sites-grid__more">
+              {error && <InlineMessage variant="error" title="暂时无法加载更多站点" detail={error} />}
+              <Button disabled={loading} onClick={error ? onRetry : onLoadMore}>
+                {loading ? "正在加载…" : error ? "重试" : "加载更多"}
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * 站点卡骨架：逐件对齐它占位的真元素（同 W3 卡骨架口径）——
+ * 16:9 封面块 ＋ body 的名/描述两行（12/14 内距、4 槽）＋ 卡脚一行两件（mono 元信息条 ＋ 28 高动作钮）。
+ * 走 `.site-card` 本体做外壳，所以边框、圆角、卡底与内容态一字不差。
+ */
+function SiteCardSkeletonGrid({ count = 4 }: { count?: number }): React.ReactElement {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, index) => (
+        <article key={index} className="site-card" aria-hidden="true">
+          <div className="site-card__cover">
+            <Skeleton variant="block" width="100%" height="100%" radius={0} />
+          </div>
+          <div className="site-card__body">
+            <Skeleton variant="line" width="55%" height={18} />
+            <span className="site-card__skel-desc">
+              <Skeleton variant="line" width="90%" height={12} />
+              <Skeleton variant="line" width="64%" height={12} />
+            </span>
+          </div>
+          {/* 卡脚同为一行两件：左 mono 元信息条、右 28 高动作钮的占位块，载→内容卡高不跳 */}
+          <div className="site-card__footer">
+            <span className="site-card__meta">
+              <Skeleton variant="line" width="60%" height={12} />
+            </span>
+            <Skeleton
+              className="site-card__act"
+              variant="block"
+              width={76}
+              height={28}
+              radius="var(--ow-radius-action)"
+            />
+          </div>
+        </article>
+      ))}
+    </>
+  )
+}
+
+/**
+ * 站点缩略图：原型 L1911–1917 的那张 74% 宽、居中的小页面示意（三条灰杠）。
+ * 站点没有封面图时占封面位；有 coverUrl 时由 `.site-card__cover-image` 顶掉。
+ */
+function SiteThumbPreview() {
+  return (
+    <div className="site-card__thumb" aria-hidden="true">
+      <span className="site-card__thumb-bar site-card__thumb-bar--title" />
+      <span className="site-card__thumb-bar site-card__thumb-bar--wide" />
+      <span className="site-card__thumb-bar site-card__thumb-bar--mid" />
+    </div>
+  )
+}