@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,198 +0,0 @@
-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

@@ -1,417 +0,0 @@
-"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 loading={loading} onClick={error ? onRetry : onLoadMore}>
-                {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>
-  )
-}