@orbit-work/ui 0.1.0

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

@@ -0,0 +1,392 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import type { ReactNode } from "react"
+import { BackButton } from "../../../composite/BackButton"
+import { DataTable, type DataTableColumn } from "../../../composite/DataTable"
+import { type DetailMenuItem, DetailOverflowMenu } from "../../../composite/DetailChrome"
+import { Check, Copy, Refresh } from "../../../composite/Icons"
+import { StatusTag, type StatusTagTone } from "../../../composite/StatusTag"
+import { Button } from "../../../primitives"
+import { Badge } from "../../../primitives/Badge"
+import { Pagination } from "../../../primitives/Pagination"
+import type { DesktopSiteItem } from "../DesktopSitesListView"
+import { ResourceConfirmation } from "../ResourceManagement"
+
+export interface DesktopSiteReleaseItem {
+  id: string
+  version: number
+  status: string
+  fileCount: number
+  totalSizeBytes: number
+  sourceReleaseId?: string
+  failureReason?: string
+  createdAt?: string
+  publishedAt?: string
+}
+
+export interface DesktopSiteReleasesViewProps {
+  site: DesktopSiteItem
+  releases: DesktopSiteReleaseItem[]
+  loading: boolean
+  error?: string | null
+  onBack: () => void
+  onEdit: () => void
+  onManage: () => void
+  onPreviewSite: () => void
+  onRetry: () => void
+  /**
+   * 页头 ⋯ 里追加的宿主动作（原型 L2014 放的是「发布 / 取消发布 / 删除」）。这三件的
+   * RPC 一期还没有，所以本件只自带一条「刷新发布记录」；宿主拿到接口后从这里补，
+   * 不必再动页头结构。
+   */
+  menuItems?: DetailMenuItem[]
+  onMenuSelect?: (key: string) => void
+  onCopySite?: () => Promise<void>
+  onRollback?: (releaseId: string) => Promise<void>
+  hasMore?: boolean
+  onLoadMore?: () => void
+  busy?: boolean
+  backLabel?: string
+  feedback?: ReactNode
+}
+
+const PAGE_SIZE = 5
+
+function releaseStatus(status: string): { label: string; variant: "normal" | "pending" | "error" | "success" } {
+  if (status === "SITE_RELEASE_STATUS_PUBLISHED") return { label: "已发布", variant: "success" }
+  if (status === "SITE_RELEASE_STATUS_PENDING_UPLOAD") return { label: "等待上传", variant: "pending" }
+  if (status === "SITE_RELEASE_STATUS_PUBLISHING") return { label: "发布中", variant: "pending" }
+  if (status === "SITE_RELEASE_STATUS_FAILED") return { label: "发布失败", variant: "error" }
+  if (status === "SITE_RELEASE_STATUS_CANCELED") return { label: "已取消", variant: "normal" }
+  return { label: "未知", variant: "normal" }
+}
+
+/** 详情页头的状态签与卡上那枚同一份词表与色档（见 DesktopSitesListView.statusTag）。 */
+function siteStatus(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" }
+}
+
+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]}`
+}
+
+function formatDate(value?: string): string {
+  if (!value) return "时间未知"
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return "时间未知"
+  return new Intl.DateTimeFormat("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date)
+}
+
+/**
+ * 发布记录列（DS2 P6）：版本/时间/文件数/体积均为读数——numeric 列＝mono + tabular-nums；
+ * 版本与时间用 align="start" 保持左对齐（读数格式不变，只是不右靠）。
+ * 状态列 Badge 带点形，文字在先＝R1 双编码。
+ * 列宽：六列全部给百分比（合计 100%）。DataTable 是 w-full 自动布局——只给部分列定宽时，
+ * 未定宽的列会吃掉全部余量（备注列曾因此占到近半栏），全部定宽后余量按份额分，
+ * 发布时间字符串最长拿最大份，备注收敛到约四分之一。
+ */
+const RELEASE_COLUMNS: DataTableColumn<DesktopSiteReleaseItem>[] = [
+  {
+    key: "version",
+    header: "版本",
+    numeric: true,
+    align: "start",
+    width: "12%",
+    render: (release) => `v${release.version}`,
+  },
+  {
+    key: "publishedAt",
+    header: "发布时间",
+    numeric: true,
+    align: "start",
+    width: "24%",
+    render: (release) => formatDate(release.publishedAt || release.createdAt),
+  },
+  {
+    key: "status",
+    header: "状态",
+    width: "10%",
+    render: (release) => {
+      const status = releaseStatus(release.status)
+      return (
+        <Badge variant={status.variant} dot>
+          {status.label}
+        </Badge>
+      )
+    },
+  },
+  {
+    key: "fileCount",
+    header: "文件数",
+    numeric: true,
+    width: "10%",
+    render: (release) => release.fileCount,
+  },
+  {
+    key: "totalSizeBytes",
+    header: "体积",
+    numeric: true,
+    width: "10%",
+    render: (release) => formatBytes(release.totalSizeBytes),
+  },
+  {
+    key: "note",
+    header: "备注",
+    width: "24%",
+    render: (release) =>
+      release.failureReason ? (
+        <span className="site-releases__note site-releases__note--failure">失败原因：{release.failureReason}</span>
+      ) : release.sourceReleaseId ? (
+        <span className="site-releases__note site-releases__note--rollback">由历史版本回滚生成</span>
+      ) : (
+        <span className="site-releases__note">—</span>
+      ),
+  },
+]
+
+/** Read-only release history for one published site. */
+export function DesktopSiteReleasesView({
+  site,
+  releases,
+  loading,
+  error,
+  onBack,
+  onEdit,
+  onManage,
+  onPreviewSite,
+  onRetry,
+  menuItems = [],
+  onMenuSelect,
+  onCopySite,
+  onRollback,
+  hasMore = false,
+  onLoadMore,
+  busy = false,
+  backLabel = "返回工作台 · 站点",
+  feedback,
+}: DesktopSiteReleasesViewProps) {
+  const [page, setPage] = useState(1)
+  const [copied, setCopied] = useState(false)
+  const [rollback, setRollback] = useState<DesktopSiteReleaseItem | null>(null)
+  const copiedTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const currentSiteStatus = siteStatus(site.status)
+  const totalPages = Math.max(1, Math.ceil(releases.length / PAGE_SIZE))
+  const currentPage = Math.min(page, totalPages)
+  const visibleReleases = releases.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
+  // 历史尚未加载到当前版本时显示占位，不能把其他版本的文件数当成当前版本。
+  const currentRelease = releases.find((release) => release.version === site.version)
+  const available = site.status === "SITE_STATUS_ACTIVE" && Boolean(site.baseUrl)
+  const columns: DataTableColumn<DesktopSiteReleaseItem>[] = onRollback
+    ? [
+        ...RELEASE_COLUMNS,
+        {
+          key: "actions",
+          header: "操作",
+          render: (release) =>
+            release.version === site.version
+              ? "当前版本"
+              : release.status === "SITE_RELEASE_STATUS_PUBLISHED" && (
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    disabled={busy || site.status === "SITE_STATUS_DISABLED"}
+                    onClick={() => setRollback(release)}
+                  >
+                    回滚
+                  </Button>
+                ),
+        },
+      ]
+    : RELEASE_COLUMNS
+
+  useEffect(() => {
+    setPage(1)
+  }, [site.id])
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages)
+  }, [page, totalPages])
+  useEffect(
+    () => () => {
+      if (copiedTimer.current) clearTimeout(copiedTimer.current)
+    },
+    [],
+  )
+
+  const handleCopyUrl = () => {
+    if (!available) return
+    const write = onCopySite ? onCopySite() : navigator.clipboard?.writeText(site.baseUrl)
+    /* 没有剪贴板（非安全上下文 / 权限被拒）就什么都不显示——图标翻成对勾却没写进剪贴板，
+       比不给反馈更糟。 */
+    if (!write) return
+    void write
+      .then(() => {
+        setCopied(true)
+        if (copiedTimer.current) clearTimeout(copiedTimer.current)
+        copiedTimer.current = setTimeout(() => setCopied(false), 1600)
+      })
+      .catch(() => {})
+  }
+
+  /* ⋯ 菜单：本件自带「刷新发布记录」（原来这颗只在错态下作为一枚重试钮出现，
+     常态下没有任何重新取数的入口），宿主的发布/取消发布/删除追加在后面。 */
+  const overflowItems: DetailMenuItem[] = [{ key: "refresh", label: "刷新发布记录", icon: <Refresh /> }, ...menuItems]
+  const handleMenuSelect = (key: string) => {
+    if (key === "refresh") {
+      onRetry()
+      return
+    }
+    onMenuSelect?.(key)
+  }
+
+  return (
+    <div className="page site-releases">
+      {/* 页头＝原型「产物详情」L1986–2019：返回条 / h1 ＋ 状态签 / mono 地址行 / 三颗次级钮 ＋ ⋯ */}
+      <header className="site-releases__head">
+        <BackButton onClick={onBack}>{backLabel}</BackButton>
+        <div className="site-releases__head-row">
+          <div className="site-releases__heading">
+            <div className="site-releases__title-row">
+              <h1 className="site-releases__title">{site.name}</h1>
+              <StatusTag tone={currentSiteStatus.tone}>{currentSiteStatus.label}</StatusTag>
+            </div>
+            <div className="site-releases__addr">
+              <span className="site-releases__addr-ver">v{site.version}</span>
+              <span className="site-releases__addr-sep" aria-hidden="true">
+                ·
+              </span>
+              {site.baseUrl ? (
+                <button
+                  type="button"
+                  data-ow-part="release-url-copy"
+                  className="site-releases__addr-copy"
+                  title={copied ? "已复制" : "复制站点地址，接收者仍需具有访问权限"}
+                  aria-label={`复制站点 ${site.name} 的链接`}
+                  disabled={!available}
+                  onClick={handleCopyUrl}
+                >
+                  <span>{site.baseUrl}</span>
+                  {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
+                </button>
+              ) : (
+                <span className="site-releases__addr-none">还没发布 · 没有链接</span>
+              )}
+            </div>
+          </div>
+          {/* 三颗同档次级钮：这页本身不设行动极——改状态的动作（发布/取消发布/删除）在 ⋯ 里，
+              原来「编辑」是实底主钮，与「管理」只差一次误点。 */}
+          <div className="site-releases__head-actions">
+            <Button variant="secondary" onClick={onPreviewSite} disabled={!available}>
+              预览
+            </Button>
+            <Button variant="secondary" onClick={onManage}>
+              分享设置
+            </Button>
+            <Button variant="secondary" onClick={onEdit} disabled={!site.sessionId}>
+              编辑
+            </Button>
+            <DetailOverflowMenu items={overflowItems} onSelect={handleMenuSelect} />
+          </div>
+        </div>
+      </header>
+
+      <main className="site-releases__scroll">
+        {feedback}
+        {/* 事实卡（原型 L2034–2044）。只留页头里没有的三件：当前版本、站点状态、站点地址
+            在标题行与 mono 地址行里已经逐字出现，事实卡里再摆一遍就是同屏说两遍。
+            §7 读数：三个值全是读数，一律 mono + tabular-nums。 */}
+        <div className="site-releases__facts">
+          <SiteFact label="最近发布时间" value={formatDate(site.publishedAt)} />
+          <SiteFact label="当前版本文件数" value={currentRelease ? `${currentRelease.fileCount} 个文件` : "—"} />
+          <SiteFact label="当前版本体积" value={currentRelease ? formatBytes(currentRelease.totalSizeBytes) : "—"} />
+        </div>
+
+        <section className="site-releases__section">
+          <div className="site-releases__section-label">
+            发布记录
+            <span className="site-releases__section-hint">
+              {loading ? (
+                "正在加载…"
+              ) : (
+                <>
+                  {hasMore ? "已加载" : "共"} <span className="mono">{releases.length}</span> 次发布
+                </>
+              )}
+            </span>
+            {error && (
+              <Button size="sm" variant="secondary" icon={<Refresh />} onClick={onRetry}>
+                重试
+              </Button>
+            )}
+          </div>
+
+          {/* DS2 P6：发布记录归口 DataTable（R3 中性件），空/载/错三态由表体统管；
+              版本号、时间、文件数、体积走 numeric 列＝mono + tabular-nums（§7 读数）。 */}
+          <DataTable
+            className="site-releases__table"
+            columns={columns}
+            rows={visibleReleases}
+            rowKey={(release) => release.id}
+            caption={`${site.name} 的发布记录`}
+            loading={loading}
+            loadingRows={3}
+            error={error ? "暂时无法加载发布记录" : undefined}
+            errorDetail={error ?? undefined}
+            emptyMessage="该站点完成首次发布后，版本记录会显示在这里。"
+          />
+
+          {!loading && !error && releases.length > 0 && (
+            <div className="site-releases__pagination">
+              {/* §7 读数：mono 只包数字，「第」「页」两个汉字留在正文字族里
+                  （同页 .site-releases__section-hint 就是这个写法）。 */}
+              <span>
+                第 <span className="mono">{currentPage}</span> / <span className="mono">{totalPages}</span> 页
+              </span>
+              <Pagination current={currentPage} total={releases.length} pageSize={PAGE_SIZE} onChange={setPage} />
+            </div>
+          )}
+          {hasMore && (
+            <Button disabled={loading || busy} onClick={onLoadMore}>
+              加载更多发布记录
+            </Button>
+          )}
+        </section>
+      </main>
+      {rollback && onRollback && (
+        <ResourceConfirmation
+          title={`回滚到 v${rollback.version}？`}
+          description="将使用此版本的内容发布一个新版本，访问权限和分享链接保持当前设置。"
+          busy={busy}
+          onCancel={() => setRollback(null)}
+          onConfirm={async () => {
+            await onRollback(rollback.id)
+            setRollback(null)
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+/** 一张事实卡：眉标 ＋ 一个读数（原型 L2036–2039）。 */
+function SiteFact({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <div className="site-releases__fact">
+      <div className="k">{label}</div>
+      <div className="v mono">{value}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopSitesListView } from "./index"
+import type { DesktopSiteItem } from "./index"
+
+const meta = {
+  title: "Desktop/DesktopSitesListView",
+  component: DesktopSitesListView,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof DesktopSitesListView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * R2 L3-1-8：件级 mock 原来一条都没有 `fileCount` / `totalSizeBytes`，
+ * 七张 story 全落 `cardMeta` 的降级支（「v3 · 1 小时前」），
+ * 原型口径「12 个文件 · 1.8 MB」在任何一张 story 里都看不到、接口到位那天没有对照基线。
+ * 前两条补上两项（走原型档），后两条故意留缺——降级支同屏可比。
+ */
+const mockSites: DesktopSiteItem[] = [
+  {
+    id: "1",
+    name: "公司官网",
+    status: "SITE_STATUS_ACTIVE",
+    baseUrl: "https://example.com",
+    coverUrl: "https://picsum.photos/seed/site1/400/300",
+    version: 3,
+    publishedAt: new Date(Date.now() - 3600000).toISOString(),
+    createdAt: new Date(Date.now() - 86400000 * 7).toISOString(),
+    sessionId: "session-1",
+    description: "企业官方网站，展示产品和服务",
+    fileCount: 12,
+    totalSizeBytes: 1_887_437,
+  },
+  {
+    id: "2",
+    name: "产品落地页",
+    status: "SITE_STATUS_ACTIVE",
+    baseUrl: "https://product.example.com",
+    version: 1,
+    publishedAt: new Date(Date.now() - 86400000).toISOString(),
+    createdAt: new Date(Date.now() - 86400000 * 2).toISOString(),
+    sessionId: "session-2",
+    description: "新产品的宣传页面",
+    fileCount: 8,
+    totalSizeBytes: 962_560,
+  },
+  {
+    id: "3",
+    name: "活动页面",
+    status: "SITE_STATUS_DRAFT",
+    baseUrl: "",
+    version: 1,
+    createdAt: new Date(Date.now() - 7200000).toISOString(),
+    sessionId: "session-3",
+    description: "年度促销活动页面（草稿）",
+  },
+  {
+    id: "4",
+    name: "帮助文档",
+    status: "SITE_STATUS_DISABLED",
+    baseUrl: "https://help.example.com",
+    version: 5,
+    publishedAt: new Date(Date.now() - 86400000 * 30).toISOString(),
+    createdAt: new Date(Date.now() - 86400000 * 60).toISOString(),
+    sessionId: "session-4",
+  },
+]
+
+export const Default: Story = {
+  args: {
+    sites: mockSites,
+    loading: false,
+    onCreateSite: () => console.log("Create site"),
+    onViewDetails: (site) => console.log("View details", site),
+    onPreviewSite: (site) => console.log("Preview site", site),
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    sites: [],
+    loading: true,
+    onCreateSite: () => {},
+    onViewDetails: () => {},
+    onPreviewSite: () => {},
+    onRetry: () => {},
+  },
+}
+
+export const Error: Story = {
+  args: {
+    sites: [],
+    loading: false,
+    error: "网络连接失败，请检查网络后重试",
+    onCreateSite: () => {},
+    onViewDetails: () => {},
+    onPreviewSite: () => {},
+    onRetry: () => console.log("Retry"),
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    sites: [],
+    loading: false,
+    onCreateSite: () => console.log("Create site"),
+    onViewDetails: () => {},
+    onPreviewSite: () => {},
+    onRetry: () => {},
+  },
+}
+
+export const WithManySites: Story = {
+  args: {
+    sites: [
+      ...mockSites,
+      {
+        id: "5",
+        name: "博客",
+        status: "SITE_STATUS_ACTIVE",
+        baseUrl: "https://blog.example.com",
+        version: 12,
+        publishedAt: new Date(Date.now() - 86400000 * 3).toISOString(),
+        createdAt: new Date(Date.now() - 86400000 * 90).toISOString(),
+        sessionId: "session-5",
+        description: "技术博客和文章分享",
+      },
+      {
+        id: "6",
+        name: "在线商城",
+        status: "SITE_STATUS_ACTIVE",
+        baseUrl: "https://shop.example.com",
+        coverUrl: "https://picsum.photos/seed/site6/400/300",
+        version: 8,
+        publishedAt: new Date(Date.now() - 7200000).toISOString(),
+        createdAt: new Date(Date.now() - 86400000 * 45).toISOString(),
+        sessionId: "session-6",
+      },
+      {
+        id: "7",
+        name: "用户中心",
+        status: "SITE_STATUS_DRAFT",
+        baseUrl: "",
+        version: 1,
+        createdAt: new Date(Date.now() - 1800000).toISOString(),
+        sessionId: "session-7",
+        description: "用户个人信息管理页面",
+      },
+      {
+        id: "8",
+        name: "数据看板",
+        status: "SITE_STATUS_ACTIVE",
+        baseUrl: "https://dashboard.example.com",
+        coverUrl: "https://picsum.photos/seed/site8/400/300",
+        version: 4,
+        publishedAt: new Date(Date.now() - 86400000 * 2).toISOString(),
+        createdAt: new Date(Date.now() - 86400000 * 20).toISOString(),
+        sessionId: "session-8",
+        description: "实时数据展示看板",
+      },
+    ],
+    loading: false,
+    onCreateSite: () => console.log("Create site"),
+    onViewDetails: (site) => console.log("View details", site),
+    onPreviewSite: (site) => console.log("Preview site", site),
+    onRetry: () => {},
+  },
+}
+
+export const OnlyActive: Story = {
+  args: {
+    sites: mockSites.filter((site) => site.status === "SITE_STATUS_ACTIVE"),
+    loading: false,
+    onCreateSite: () => console.log("Create site"),
+    onViewDetails: (site) => console.log("View details", site),
+    onPreviewSite: (site) => console.log("Preview site", site),
+    onRetry: () => {},
+  },
+}
+
+export const OnlyDrafts: Story = {
+  args: {
+    sites: mockSites.filter((site) => site.status === "SITE_STATUS_DRAFT"),
+    loading: false,
+    onCreateSite: () => console.log("Create site"),
+    onViewDetails: (site) => console.log("View details", site),
+    onPreviewSite: (site) => console.log("Preview site", site),
+    onRetry: () => {},
+  },
+}
+
+/**
+ * R2 L3-1-8：卡脚读数三档同屏对照——
+ * ① 两项齐＝原型口径「12 个文件 · 1.8 MB」；
+ * ② 只给一项＝「6 个文件 · v2 · …」（改判前这里会把版本与时间整条吞掉，只剩半句）；
+ * ③ 两项都缺＝降级支「v5 · 30 天前」。
+ */
+export const CardFootReadout: Story = {
+  args: {
+    sites: [
+      { ...mockSites[0]!, id: "readout-1", name: "两项齐（原型档）" },
+      {
+        ...mockSites[1]!,
+        id: "readout-2",
+        name: "只给文件数",
+        fileCount: 6,
+        totalSizeBytes: undefined,
+        version: 2,
+      },
+      {
+        ...mockSites[3]!,
+        id: "readout-3",
+        name: "两项都缺（降级支）",
+      },
+    ],
+    loading: false,
+    onCreateSite: () => {},
+    onViewDetails: () => {},
+    onPreviewSite: () => {},
+    onRetry: () => {},
+  },
+}
+
+/**
+ * R2 L3-1-8：密集档（原型 L1898 的「密集」开关：列宽 340→236、封面 16:9→1:1、
+ * 说明与主动作收掉）。件级原来没有这一档 story，`.sites-grid--dense` 与
+ * `.sites-space__dense` 的选中态只能在整屏 story 上核。
+ */
+export const Dense: Story = {
+  args: {
+    sites: mockSites,
+    loading: false,
+    dense: true,
+    onDenseChange: () => {},
+    onCreateSite: () => {},
+    onViewDetails: () => {},
+    onPreviewSite: () => {},
+    onRetry: () => {},
+  },
+}