@orbit-work/ui 0.1.0

package/src/components/domain/office/OfficePreview/OfficePreview.stories.tsx

@@ -0,0 +1,265 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useEffect, useState } from "react"
+import { BeaconSpinner } from "../../../composite/BeaconSpinner"
+import { OfficePreview } from "./index"
+
+const meta = {
+  title: "Office/OfficePreview",
+  component: OfficePreview,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof OfficePreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// 本地 fixture（.storybook/public/fixtures/，见该目录 README）。原来三个 src 全是公网外链
+// （calibre-ebook.com / file-examples.com / scholar.harvard.edu），离线与 CI 下一律取不到，
+// 十几个「内容 story」渲出来全是错误态卡——Storybook 里根本看不到真实内容。
+const sampleDocUrl = "/fixtures/sample.docx"
+const sampleXlsxUrl = "/fixtures/sample.xlsx"
+const samplePptxUrl = "/fixtures/sample.pptx"
+/** 故意取不到的本地路径：staticDirs 直接 404，不出网，也不会把 networkidle 拖挂。 */
+const missingDocUrl = "/fixtures/does-not-exist.docx"
+
+export const WordDefault: Story = {
+  args: {
+    src: sampleDocUrl,
+    fileType: "word",
+  },
+}
+
+export const WordWithOpenButton: Story = {
+  args: {
+    src: sampleDocUrl,
+    fileType: "word",
+    onOpen: () => console.log("Opening with system default"),
+  },
+}
+
+export const WordWithOpenWithMenu: Story = {
+  args: {
+    src: sampleDocUrl,
+    fileType: "word",
+    onRequestOpenWithOptions: async () => [
+      { label: "使用 Microsoft Word 打开", id: "word", icon: "📄" },
+      { label: "使用 Google Docs 打开", id: "google", icon: "🌐" },
+      { label: "使用 Pages 打开", id: "pages", icon: "📝" },
+    ],
+    onOpenWith: (option) => console.log("Opening with:", option.label),
+  },
+}
+
+export const WordLoading: Story = {
+  args: {
+    fileType: "word",
+    loading: (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 12,
+          color: "var(--ow-text-2)",
+        }}
+      >
+        {/* §9 旋转圈退役：原是手搓 3px 描边环自转 1s、断口色取 --ow-primary（行动极落点，
+            暗档即荧黄）。改挂锁定件 BeaconSpinner size=32 → 完整信标，加载态占状态极·限一处，
+            下面「正在加载」一句出 R1 文字编码。 */}
+        <BeaconSpinner size={32} aria-label="正在加载 Word 文档" />
+        <p>正在加载 Word 文档...</p>
+      </div>
+    ),
+  },
+}
+
+export const WordEmpty: Story = {
+  args: {
+    fileType: "word",
+  },
+}
+
+/** 打不开：内建错误态＝InlineMessage error tint 三件套。裸英文（`Failed to fetch` 一类）
+ *  归成中文一句人话，原文降级到折叠的 mono 详情（§6 人话一句 ＋ mono ≤2 行）。 */
+export const WordError: Story = {
+  args: {
+    src: missingDocUrl,
+    fileType: "word",
+  },
+}
+
+/** 载入：内建 Skeleton 呼吸（禁 shimmer）。story 把 fetch 冻在 pending 好让这一态停住。 */
+export const WordLoadingSkeleton: Story = {
+  decorators: [
+    (Story) => {
+      const original = globalThis.fetch
+      globalThis.fetch = (() => new Promise<Response>(() => {})) as typeof fetch
+      useEffect(
+        () => () => {
+          globalThis.fetch = original
+        },
+        [original],
+      )
+      return <Story />
+    },
+  ],
+  args: {
+    src: "/fixtures/never.docx",
+    fileType: "word",
+  },
+}
+
+export const ExcelDefault: Story = {
+  args: {
+    src: sampleXlsxUrl,
+    fileType: "excel",
+  },
+}
+
+export const ExcelWithOpenButton: Story = {
+  args: {
+    src: sampleXlsxUrl,
+    fileType: "excel",
+    onOpen: () => console.log("Opening with system default"),
+  },
+}
+
+export const ExcelWithOpenWithMenu: Story = {
+  args: {
+    src: sampleXlsxUrl,
+    fileType: "excel",
+    onRequestOpenWithOptions: async () => [
+      { label: "使用 Microsoft Excel 打开", id: "excel", icon: "📊" },
+      { label: "使用 Google Sheets 打开", id: "sheets", icon: "🌐" },
+      { label: "使用 Numbers 打开", id: "numbers", icon: "🔢" },
+    ],
+    onOpenWith: (option) => console.log("Opening with:", option.label),
+  },
+}
+
+export const ExcelEmpty: Story = {
+  args: {
+    fileType: "excel",
+  },
+}
+
+export const PowerPointDefault: Story = {
+  args: {
+    src: samplePptxUrl,
+    fileType: "powerpoint",
+  },
+}
+
+export const PowerPointWithNavigation: Story = {
+  render: () => {
+    return (
+      <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
+        <OfficePreview src={samplePptxUrl} fileType="powerpoint" style={{ flex: 1 }} />
+      </div>
+    )
+  },
+}
+
+export const PowerPointWithOpenButton: Story = {
+  args: {
+    src: samplePptxUrl,
+    fileType: "powerpoint",
+    onOpen: () => console.log("Opening with system default"),
+  },
+}
+
+export const PowerPointWithOpenWithMenu: Story = {
+  args: {
+    src: samplePptxUrl,
+    fileType: "powerpoint",
+    onRequestOpenWithOptions: async () => [
+      { label: "使用 Microsoft PowerPoint 打开", id: "powerpoint", icon: "📽️" },
+      { label: "使用 Google Slides 打开", id: "slides", icon: "🌐" },
+      { label: "使用 Keynote 打开", id: "keynote", icon: "🎬" },
+    ],
+    onOpenWith: (option) => console.log("Opening with:", option.label),
+  },
+}
+
+export const PowerPointEmpty: Story = {
+  args: {
+    fileType: "powerpoint",
+  },
+}
+
+export const UnknownTypeEmpty: Story = {
+  args: {
+    fileType: "unknown",
+  },
+}
+
+export const ConstrainedWidth: Story = {
+  render: () => (
+    <div style={{ maxWidth: 800, margin: "0 auto", height: "100vh" }}>
+      <OfficePreview src={sampleDocUrl} fileType="word" style={{ height: "100%" }} />
+    </div>
+  ),
+}
+
+export const FullScreenWord: Story = {
+  render: () => (
+    <div style={{ height: "100vh" }}>
+      <OfficePreview src={sampleDocUrl} fileType="word" style={{ height: "100%" }} />
+    </div>
+  ),
+}
+
+export const FullScreenExcel: Story = {
+  render: () => (
+    <div style={{ height: "100vh" }}>
+      <OfficePreview src={sampleXlsxUrl} fileType="excel" style={{ height: "100%" }} />
+    </div>
+  ),
+}
+
+export const FullScreenPowerPoint: Story = {
+  render: () => (
+    <div style={{ height: "100vh" }}>
+      <OfficePreview src={samplePptxUrl} fileType="powerpoint" style={{ height: "100%" }} />
+    </div>
+  ),
+}
+
+export const SplitView: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 16, height: "100vh", padding: 16 }}>
+      <div style={{ flex: 1 }}>
+        <OfficePreview src={sampleDocUrl} fileType="word" style={{ height: "100%" }} />
+      </div>
+      <div style={{ flex: 1 }}>
+        <OfficePreview src={sampleXlsxUrl} fileType="excel" style={{ height: "100%" }} />
+      </div>
+    </div>
+  ),
+}
+
+export const WithCustomContainer: Story = {
+  render: () => (
+    <div
+      style={{
+        height: "100vh",
+        background: "var(--ow-bg)",
+        padding: 24,
+      }}
+    >
+      <div
+        style={{
+          height: "100%",
+          background: "var(--ow-surface)",
+          border: "1px solid var(--ow-border)",
+          borderRadius: 12,
+          overflow: "hidden",
+        }}
+      >
+        <OfficePreview src={samplePptxUrl} fileType="powerpoint" style={{ height: "100%" }} />
+      </div>
+    </div>
+  ),
+}

package/src/components/domain/office/OfficePreview/OfficePreviewDialog.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { OfficePreviewDialog } from "./OfficePreviewDialog"
+
+// 本地 fixture（.storybook/public/fixtures/，见该目录 README）。原来五个 story 一个都不给 src，
+// 渲出来全是「暂无 Word 文档」空态，story 注释描述的「适配器铺满内容区」一格没渲。
+const sampleDocUrl = "/fixtures/sample.docx"
+const sampleXlsxUrl = "/fixtures/sample.xlsx"
+const samplePptxUrl = "/fixtures/sample.pptx"
+
+const meta = {
+  title: "Preview/OfficePreviewDialog",
+  component: OfficePreviewDialog,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof OfficePreviewDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Word：壳出标题栏与动作组，适配器铺满内容区（chrome=false，无双层边框）。 */
+export const Word: Story = {
+  args: {
+    open: true,
+    fileName: "组件验收清单.docx",
+    fileType: "word",
+    src: sampleDocUrl,
+    meta: "18 KB",
+    onClose: () => {},
+    onDownload: () => {},
+  },
+}
+
+/** Excel：x-spreadsheet 的 canvas 网格恒为浅档，所以衬底走 plain 不叠纸。 */
+export const Excel: Story = {
+  args: {
+    open: true,
+    fileName: "2026-预算表.xlsx",
+    fileType: "excel",
+    src: sampleXlsxUrl,
+    meta: "1 个工作表",
+    onClose: () => {},
+  },
+}
+
+/** PowerPoint：缩略图列表用中性选中底（不再借 --ow-primary，暗档那是荧黄）。 */
+export const PowerPoint: Story = {
+  args: {
+    open: true,
+    fileName: "品牌回顾.pptx",
+    fileType: "powerpoint",
+    src: samplePptxUrl,
+    meta: "3 页",
+    onClose: () => {},
+  },
+}
+
+/** 加载中 / 解析失败：三态一律由壳承担。 */
+export const Loading: Story = {
+  args: { open: true, fileName: "大文件.xlsx", fileType: "excel", loading: true, onClose: () => {} },
+}
+
+export const ParseFailed: Story = {
+  args: {
+    open: true,
+    fileName: "老格式.doc",
+    fileType: "word",
+    error: "这个文件解析不了，只支持 .docx / .xlsx / .pptx。",
+    errorDetail: "Unsupported OLE2 compound document",
+    onClose: () => {},
+  },
+}

package/src/components/domain/office/OfficePreview/OfficePreviewDialog.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { FilePreviewDialog, type FilePreviewDialogProps } from "../../files/PreviewDialog"
+import { OfficePreview, type OfficePreviewProps } from "./index"
+
+/**
+ * OfficePreviewDialog —— Office 适配器 ×「PreviewDialog 壳」的现成组合
+ * （蓝图批次④：`PreviewDialog 壳 + Code/Csv/Image/Markdown/Office/Pdf 适配器`）。
+ *
+ * 分工就是壳语法本身：
+ *  - **壳**（`FilePreviewDialog`）出模态立面、48 标题栏（文件名 mono＋tabular-nums）、
+ *    下载/打开方式动作组、以及 §6 的载/错/空三态；
+ *  - **适配器**（`OfficePreview`，`chrome={false}`）只出内容，不再自绘边框。
+ *
+ * 衬底走 `plain`：Word/Excel/PPT 三个渲染器各自带纸（docx 白页衬灰底、pptx 幻灯片底、
+ * x-spreadsheet 恒亮 canvas 网格），壳再叠 `paper` 会纸中纸。
+ *
+ * 继承自：OfficePreview（原自带卡片立面的独立预览）。
+ */
+export type OfficePreviewDialogProps = Omit<FilePreviewDialogProps, "children" | "surface"> &
+  Pick<OfficePreviewProps, "src" | "fileType" | "onOpen" | "onRequestOpenWithOptions" | "onOpenWith">
+
+export function OfficePreviewDialog({
+  src,
+  fileType,
+  onOpen,
+  onRequestOpenWithOptions,
+  onOpenWith,
+  ...shell
+}: OfficePreviewDialogProps) {
+  return (
+    <FilePreviewDialog {...shell} surface="plain">
+      <OfficePreview
+        chrome={false}
+        src={src}
+        fileType={fileType}
+        onOpen={onOpen}
+        onRequestOpenWithOptions={onRequestOpenWithOptions}
+        onOpenWith={onOpenWith}
+      />
+    </FilePreviewDialog>
+  )
+}

package/src/components/domain/office/OfficePreview/OfficePreviewSource.test.mjs

@@ -0,0 +1,126 @@
+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")
+
+test("PowerPoint preview switches slides with vertical arrow keys while active", () => {
+  assert.match(source, /event\.key !== ['"]ArrowUp['"] && event\.key !== ['"]ArrowDown['"]/)
+  assert.match(source, /event\.key === ['"]ArrowUp['"] \? -1 : 1/)
+  assert.match(source, /Math\.min\(Math\.max\(current \+ offset, 0\), slideCount - 1\)/)
+  assert.match(source, /tabIndex=\{0\}/)
+  assert.match(source, /onKeyDown=\{handlePptxKeyDown\}/)
+  assert.match(source, /event\.currentTarget\.focus\(\{ preventScroll: true \}\)/)
+})
+
+test("PowerPoint preview exposes keyboard focus and keeps the active thumbnail visible", () => {
+  assert.match(source, /role="region"/)
+  assert.match(source, /aria-label=\{`PowerPoint 预览，第 \$\{activeSlide \+ 1\} 页，共 \$\{slideCount\} 页`\}/)
+  assert.match(source, /activeThumbnail\?\.scrollIntoView\(\{ block: ['"]nearest['"] \}\)/)
+  // R2：焦点环三件套（§6 既定态）——环宽/环色/缝全走 token，不再写死 2 与 -2px。
+  // 这一格铺满壳内容区且父级 overflow-hidden，正 offset 会被裁掉，故缝取负值内收。
+  assert.ok(source.includes("focus-visible:[outline:var(--ow-focus-ring-w)_solid_var(--ow-focus-ring)]"))
+  assert.ok(source.includes("focus-visible:[outline-offset:calc(var(--ow-focus-ring-offset)*-1)]"))
+  assert.ok(!source.includes("focus-visible:outline-2"))
+  assert.ok(!source.includes("outline-ow-focus-border"))
+})
+
+// R2：载态优先于空态——原来 `!src` 分支排在 `state === "loading"` 之前，state 恒为 idle，
+// 自定义 loading 节点（WordLoading story）永不可达，渲出来是空态不是载态。
+test("自定义 loading 节点可达：调用方自述载中优先于空态", () => {
+  assert.match(source, /const selfDeclaredLoading = !src && loadingNode != null/)
+  assert.match(source, /\{state === "loading" \|\| selfDeclaredLoading \? \(/)
+})
+
+// R2：§7 控件高——pptx 工具条不再用 py-1.5 靠 6+28+6 凑 40，与 PdfPreview header 同口径钉死。
+test("§7 控件高：pptx 工具条钉 --ow-h-lg(40)", () => {
+  assert.match(source, /data-ow-part="pptx-toolbar"[\s\S]*?style=\{\{ height: "var\(--ow-h-lg\)" \}\}/)
+  assert.doesNotMatch(source, /gap-1 py-1\.5 px-3/)
+})
+
+// ─── W3 空态 G5 清扫 ───
+
+test("§6 容器三态：空＝EmptyState 母题 / 载＝Skeleton 呼吸 / 错＝InlineMessage", () => {
+  assert.match(source, /import \{ Skeleton \} from "\.\.\/\.\.\/\.\.\/composite\/Skeleton"/)
+  assert.match(source, /import \{ Button, EmptyState, InlineMessage \} from "\.\.\/\.\.\/\.\.\/primitives"/)
+  assert.match(source, /<EmptyState message=\{`暂无 \$\{FILE_TYPE_LABELS\[fileType\]\}`\} \/>/)
+  assert.match(source, /data-ow-part="loading"[\s\S]*?<Skeleton variant="line"/)
+  assert.match(source, /data-ow-part="error"[\s\S]*?<InlineMessage variant="error" detail=\{errorDetail\}>/)
+})
+
+test("三态不再共用 text-3 灰字居中的 div，自画的彩色文件类型图标整族删除", () => {
+  assert.doesNotMatch(source, /data-ow-part="empty"[\s\S]{0,200}?text-ow-text-3/)
+  assert.doesNotMatch(source, /FILE_TYPE_ICONS/)
+  assert.doesNotMatch(source, /加载中…/)
+})
+
+test("裸英文错误归中文人话，原文只进 mono 详情（§6 人话一句＋mono ≤2 行）", () => {
+  assert.match(source, /class OfficeLoadError extends Error/)
+  assert.match(source, /function localizeOfficeError\(raw: string, fileType: OfficeFileType\): string/)
+  assert.match(source, /const \[errorDetail, setErrorDetail\] = useState\(""\)/)
+  assert.match(
+    source,
+    /setErrorMsg\(err instanceof OfficeLoadError \? err\.human : localizeOfficeError\(raw, fileType\)\)/,
+  )
+  assert.match(source, /setErrorDetail\(err instanceof OfficeLoadError \? err\.detail : raw\)/)
+  // 抛点自带中文人话；HTTP 状态码降级成 detail
+  assert.match(source, /throw new OfficeLoadError\(\s*`\$\{FILE_TYPE_LABELS\[fileType\]\}没取到/)
+  assert.match(source, /`HTTP \$\{response\.status\} \$\{response\.statusText\}`\.trim\(\)/)
+  assert.doesNotMatch(source, /new Error\(`加载失败/)
+  assert.doesNotMatch(source, /new Error\(`不支持的文件类型/)
+})
+
+test("loading / error 覆盖槽仍在（对外 API 不变）", () => {
+  assert.match(source, /\{loadingNode \?\? \(/)
+  assert.match(source, /\{errorNode \?\? \(/)
+})
+
+// W5 移交项⑥：Excel 无工作表时原来由 renderExcel 直接 innerHTML 写一段
+// `<p class="ow-office-preview__empty-text">无工作表内容</p>`。那个节点不在 React 树里，
+// G5 母题进不去。现在 renderExcel 返回 null＝没挂实例，空态由 React 的 state="empty" 接管。
+test("Excel 空工作簿走 React 空态分支，不再 innerHTML 写灰字 <p>", async () => {
+  assert.match(source, /type RenderState = "idle" \| "loading" \| "ready" \| "empty" \| "error"/)
+  assert.match(source, /\): Promise<\(\(\) => void\) \| null> \{/)
+  assert.match(source, /if \(!workbook\.worksheets\.length\) return null/)
+  assert.match(source, /if \(!dispose\) \{\s*setState\("empty"\)/)
+  assert.match(source, /state === "empty" \? \([\s\S]{0,200}?<EmptyState message="这个表格里没有工作表。" \/>/)
+  // innerHTML 空态与它的 CSS 规则一并退役（零消费方）
+  assert.doesNotMatch(source, /ow-office-preview__empty-text|container\.innerHTML/)
+  const components = await readFile(new URL("../../../../../styles/components.css", import.meta.url), "utf8")
+  assert.doesNotMatch(components, /^\.ow-office-preview__empty-text \{/m)
+})
+
+// ── W5 残留清扫：贴地零影 / 表面档 / 线宽 / 图标语系 ──
+
+/** 只在「代码」上验禁令：注释里点名旧写法是文档，不是用法。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+test("§5 贴地零影：pptx 幻灯片是面板内的贴地内容，立边靠 1px --ow-border", () => {
+  assert.match(code, /data-ow-part="pptx-slide"[\s\S]*?border border-ow-border/)
+  assert.doesNotMatch(code, /shadow-\[var\(--ow-shadow-/)
+})
+
+test("§5 表面三档：缩略图栏取实心 --ow-surface，毛玻璃整套退场", () => {
+  assert.match(code, /data-ow-part="pptx-thumbs"[\s\S]*?bg-ow-surface/)
+  assert.doesNotMatch(code, /backdrop-blur/)
+  assert.doesNotMatch(code, /-webkit-backdrop-filter/)
+  assert.doesNotMatch(code, /bg-ow-bg\/72/)
+})
+
+test("线宽一档：缩略图外框 2px → 1px --ow-border", () => {
+  assert.doesNotMatch(code, /border-2 border-ow-border/)
+  assert.match(code, /data-ow-part="slide"[\s\S]*?border border-ow-border/)
+})
+
+test("§7 图标语系单一：工具条缩放钮走 Icons 族 ZoomIn/ZoomOut，手绘 path 退场", () => {
+  assert.match(source, /import \{ ZoomIn, ZoomOut \} from "\.\.\/\.\.\/\.\.\/composite\/Icons"/)
+  assert.match(code, /<ZoomOut width=\{14\} height=\{14\} \/>/)
+  assert.match(code, /<ZoomIn width=\{14\} height=\{14\} \/>/)
+  assert.doesNotMatch(code, /d="M5 12h14"/)
+  assert.doesNotMatch(code, /d="M12 5v14M5 12h14"/)
+})
+
+test("空态槽不再借用 loading 覆盖槽（loading 是加载指示器，不是空态）", () => {
+  assert.match(code, /data-ow-part="empty"[\s\S]{0,200}?<EmptyState message=/)
+  assert.doesNotMatch(code, /\{loadingNode \?\? <EmptyState/)
+})