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

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

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

@@ -1,244 +0,0 @@
-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: () => {},
-  },
-}