@orbit-work/ui 0.1.0

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

@@ -0,0 +1,227 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import {
+  DesktopWorkspaceEmptyState,
+  DesktopWorkspaceEntryRowView,
+  DesktopWorkspaceMemoryDetailDialog,
+  DesktopWorkspaceMemoryView,
+  DesktopWorkspaceProjectDetailView,
+  DesktopWorkspaceProjectRowView,
+} from "./index"
+
+/**
+ * 「我的空间」件集 —— **整族待退役**（A11-B4 · 裁决 16）。原型里没有这一屏：项目文件归右栏
+ * 「文件」页签（`Files/FileBrowser`、`Screens/Browser` 的 FilesTab），记忆归设置二级页第八段
+ * （`Desktop/DesktopSettingsMemorySection`、`Screens/SettingsMemory`）。这些故事只作退役对照。
+ * 连接器详情已搬去 `Desktop/DesktopConnectorDetailView`（它与「我的空间」无关，别一起删）。
+ */
+const meta = {
+  title: "Desktop/DesktopWorkspaceView",
+  tags: ["deprecated"],
+  component: DesktopWorkspaceEmptyState,
+} satisfies Meta<typeof DesktopWorkspaceEmptyState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const EmptyState: Story = {
+  args: {
+    // icon 入参已 @deprecated 且实现不解构（传了也不渲染）——空态母题固定为信标构型。
+    title: "还没有任何项目",
+    description: "创建项目后会显示在这里",
+  },
+}
+
+export const ProjectRow: StoryObj<typeof DesktopWorkspaceProjectRowView> = {
+  render: () => (
+    <div style={{ padding: 20, background: "var(--ow-bg)" }}>
+      <DesktopWorkspaceProjectRowView
+        name="orbit-fe"
+        path="/Users/zhangying/projects/orbit-fe"
+        onEnter={() => console.log("Enter project")}
+        onOpenDirectory={() => console.log("Open directory")}
+      />
+    </div>
+  ),
+}
+
+export const EntryRow: StoryObj<typeof DesktopWorkspaceEntryRowView> = {
+  render: () => (
+    <div style={{ padding: 20, background: "var(--ow-bg)" }}>
+      <DesktopWorkspaceEntryRowView
+        entry={{
+          id: "1",
+          name: "src",
+          kind: "folder",
+          size: "—",
+          modified: "2 小时前",
+        }}
+        onEnter={(entry) => console.log("Enter", entry)}
+        onOpen={(entry) => console.log("Open", entry)}
+      />
+      <DesktopWorkspaceEntryRowView
+        entry={{
+          id: "2",
+          name: "package.json",
+          kind: "file",
+          size: "2.4 KB",
+          modified: "1 小时前",
+        }}
+        onEnter={(entry) => console.log("Enter", entry)}
+        onOpen={(entry) => console.log("Open", entry)}
+      />
+    </div>
+  ),
+}
+
+const mockEntries = [
+  { id: "1", name: "src", kind: "folder" as const, modified: "2 小时前" },
+  { id: "2", name: "docs", kind: "folder" as const, modified: "1 天前" },
+  { id: "3", name: "package.json", kind: "file" as const, size: "2.4 KB", modified: "1 小时前" },
+  { id: "4", name: "README.md", kind: "file" as const, size: "5.2 KB", modified: "3 小时前" },
+]
+
+export const ProjectDetail: StoryObj<typeof DesktopWorkspaceProjectDetailView> = {
+  render: () => (
+    <div style={{ height: "100vh" }}>
+      <DesktopWorkspaceProjectDetailView
+        name="orbit-fe"
+        breadcrumbs={["packages", "ow-ui"]}
+        entries={mockEntries}
+        onBack={() => console.log("Back")}
+        onBreadcrumb={(index) => console.log("Breadcrumb", index)}
+        onEnter={(entry) => console.log("Enter", entry)}
+        onOpen={(entry) => console.log("Open", entry)}
+      />
+    </div>
+  ),
+}
+
+export const ProjectDetailEmpty: StoryObj<typeof DesktopWorkspaceProjectDetailView> = {
+  render: () => (
+    <div style={{ height: "100vh" }}>
+      <DesktopWorkspaceProjectDetailView name="empty-project" entries={[]} onBack={() => console.log("Back")} />
+    </div>
+  ),
+}
+
+export const ProjectDetailLoading: StoryObj<typeof DesktopWorkspaceProjectDetailView> = {
+  render: () => (
+    <div style={{ height: "100vh" }}>
+      <DesktopWorkspaceProjectDetailView
+        name="loading-project"
+        entries={[]}
+        loading
+        onBack={() => console.log("Back")}
+      />
+    </div>
+  ),
+}
+
+/** 错态：一句人话 ＋ mono 技术详情 ≤2 行 ＋ 重试（§6 容器三态最后一档）。 */
+export const ProjectDetailError: StoryObj<typeof DesktopWorkspaceProjectDetailView> = {
+  render: () => (
+    <div style={{ height: "100vh" }}>
+      <DesktopWorkspaceProjectDetailView
+        name="orbit-fe"
+        entries={[]}
+        error="读不到这个目录，可能已被移动或删除。"
+        errorDetail="ENOENT: no such file or directory, scandir '/Users/terry/Orbitwork/projects/orbit-fe'"
+        onRetry={() => console.log("Retry")}
+        onBack={() => console.log("Back")}
+      />
+    </div>
+  ),
+}
+
+const mockMemorySections = [
+  {
+    id: "user-profile",
+    title: "用户画像",
+    hint: "关于您的基本信息",
+    items: [
+      {
+        id: "1",
+        subject: "职业角色",
+        text: "前端开发工程师，擅长 React 和 TypeScript",
+        source: "user" as const,
+        sourceLabel: "用户提供",
+        when: "2 天前",
+        tags: ["职业", "技能"],
+      },
+      {
+        id: "2",
+        subject: "工作偏好",
+        text: "喜欢使用 pnpm 管理依赖，优先考虑类型安全",
+        source: "extractor" as const,
+        when: "1 天前",
+        tags: ["偏好"],
+      },
+    ],
+  },
+  {
+    id: "project-context",
+    title: "项目上下文",
+    items: [
+      {
+        id: "3",
+        text: "orbit-fe 项目使用 monorepo 结构，包含 desktop 和 server 两个主要应用",
+        source: "remember" as const,
+        sourceLabel: "手动记住",
+        when: "3 小时前",
+        tags: ["架构", "orbit-fe"],
+      },
+    ],
+  },
+]
+
+export const MemoryView: StoryObj<typeof DesktopWorkspaceMemoryView> = {
+  render: () => (
+    <div style={{ padding: 20, background: "var(--ow-bg)", minHeight: "100vh" }}>
+      <DesktopWorkspaceMemoryView sections={mockMemorySections} onOpenItem={(item) => console.log("Open item", item)} />
+    </div>
+  ),
+}
+
+export const MemoryViewEmpty: StoryObj<typeof DesktopWorkspaceMemoryView> = {
+  render: () => (
+    <div style={{ padding: 20, background: "var(--ow-bg)", minHeight: "100vh" }}>
+      <DesktopWorkspaceMemoryView sections={[]} />
+    </div>
+  ),
+}
+
+/** 载态：skeleton 行呼吸，不用 shimmer（§9）。 */
+export const MemoryViewLoading: StoryObj<typeof DesktopWorkspaceMemoryView> = {
+  render: () => (
+    <div style={{ padding: 20, background: "var(--ow-bg)", minHeight: "100vh" }}>
+      <DesktopWorkspaceMemoryView sections={[]} loading />
+    </div>
+  ),
+}
+
+/** 错态：一句人话 ＋ mono 详情 ＋ 重试。 */
+export const MemoryViewError: StoryObj<typeof DesktopWorkspaceMemoryView> = {
+  render: () => (
+    <div style={{ padding: 20, background: "var(--ow-bg)", minHeight: "100vh" }}>
+      <DesktopWorkspaceMemoryView
+        sections={[]}
+        error="记忆没能取回来，稍后再试。"
+        errorDetail="GET /v1/memory 503 Service Unavailable"
+        onRetry={() => console.log("Retry")}
+      />
+    </div>
+  ),
+}
+
+export const MemoryDetailDialog: StoryObj<typeof DesktopWorkspaceMemoryDetailDialog> = {
+  render: () => (
+    <DesktopWorkspaceMemoryDetailDialog
+      title="职业角色"
+      content="前端开发工程师，擅长 React 和 TypeScript"
+      meta="2 天前 · 用户提供"
+      onClose={() => console.log("Close")}
+      onDelete={() => console.log("Delete")}
+      onSave={(content) => console.log("Save", content)}
+    />
+  ),
+}

package/src/components/domain/desktop/DesktopWorkspaceView/DesktopWorkspaceViewSource.test.mjs

@@ -0,0 +1,175 @@
+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")
+
+/* A11-B4（裁决 16）：连接器详情已搬去 ../DesktopConnectorDetailView，
+   它的四条断言（发现内容槽 / 连接器行不再暴露 / 工具区计数只出一处）随件迁到
+   DesktopConnectorDetailViewSource.test.mjs，本文件只留「我的空间」自己的断言。 */
+
+test("workspace containers carry all three states (DS2 P6 §6)", () => {
+  /* 载＝skeleton 呼吸 · 错＝一句人话＋mono 详情＋重试 · 空＝EmptyState 信标母题 */
+  assert.match(source, /function WorkspaceListSkeleton/)
+  assert.match(source, /<Skeleton key=\{index\} variant="block"/)
+  assert.equal(source.match(/<WorkspaceListSkeleton/g)?.length, 2)
+  assert.equal(source.match(/<InlineMessage\s+variant="error"/g)?.length, 2)
+  assert.equal(source.match(/errorDetail\?: string/g)?.length, 2)
+  assert.equal(source.match(/onRetry\?: \(\) => void/g)?.length, 2)
+  assert.match(source, /<EmptyState\s+className="mem-empty"/)
+  assert.doesNotMatch(source, /mem-empty__icon/)
+  assert.doesNotMatch(styles, /^\s*\.mem-empty__icon/m)
+})
+
+test("workspace readouts run mono (DS2 P6 §7)", () => {
+  /* 项目路径 / 文件体积 / 修改时间都是读数 */
+  assert.match(styles, /\.fs-row \.meta \.sub \{[^}]*font-family: var\(--ow-font-mono\)/)
+  assert.match(styles, /\.fs-row \.col \{[^}]*var\(--ow-font-mono\)[^}]*tabular-nums/)
+})
+
+test("workspace rows keep semantic surfaces instead of gray primitives", () => {
+  /* §2 语义优先：字形底 / 缩略图底 / 私有徽标底改 --ow-surface-2，来源点走 --ow-border-strong */
+  assert.match(styles, /\.fs-row \.g \{[^}]*background: var\(--ow-surface-2\)/)
+  assert.match(styles, /\.fs-row img\.g \{[^}]*background: var\(--ow-surface-2\)/)
+  assert.match(styles, /\.fs-row \.badge-mine \{[^}]*background: var\(--ow-surface-2\)/)
+  assert.match(styles, /\.mem-note \.tick \{[^}]*background: var\(--ow-border-strong\)/)
+  assert.doesNotMatch(styles, /\.fs-row [^{\n]*\{[^}]*var\(--ow-gray-/)
+  assert.doesNotMatch(styles, /\.mem-note[^{\n]*\{[^}]*var\(--ow-gray-/)
+})
+
+// W5 去痕（共享 CSS）：挂件面板三族的 V1 残迹。这些标记由 apps/desktop 的 WidgetCards
+// 渲染，packages/ui 只持有样式，所以断言只压 desktop-surfaces.css。
+test("widget panel drops the V1 decorative pulses, pill checkbox and four-colour tags", () => {
+  // §9：注意点/横幅点原来挂 pulse 1.4s ease-in-out（档外时长＋档外缓动＋装饰闪烁）
+  assert.doesNotMatch(styles, /\.attn-count \.dp \{[^}]*animation:/)
+  assert.doesNotMatch(styles, /\.attn-banner \.dp \{[^}]*animation:/)
+  // §7：勾选框走 4px 档，999 只留给带状态点/计数的 chip
+  assert.match(styles, /\.wtodo \.ck \{[^}]*border-radius: var\(--ow-radius-2xs\)/)
+  // 分类标：sky/violet/green/warm 四色收敛到 info tint ＋ 6px 直角
+  assert.match(
+    styles,
+    /\.wtodo \.wtag \{[^}]*border-radius: var\(--ow-radius-tag\)[^}]*background: var\(--ow-mention-bg\)/,
+  )
+  assert.doesNotMatch(styles, /\.wtodo \.wtag\.(green|warm) \{[^}]*var\(--ow-(success|warning)/)
+  // §6：拖拽源槽不用整块 opacity；荧黄的 --ow-drop-* 只留给落点槽
+  assert.doesNotMatch(styles, /\.wc-slot\.dragging \{[^}]*opacity:/)
+  assert.match(styles, /\.wc-slot\.dragging > \.wc \{[^}]*background: var\(--ow-surface-2\)/)
+  // §4 R2：墨底纸字的 CTA hover 不得跳到行动极族（暗档＝荧黄）
+  assert.match(styles, /\.wsub \.attn-line \.cta:hover \{ background: var\(--ow-text-2\); \}/)
+})
+
+// W5 残留清扫片 14（共享 CSS）：文件空间 / 记忆 / 对话框表单三片的形状、显影与死族。
+test("file & memory surfaces settle the tag shape, focus reveal and timeline token", () => {
+  // §7 形状：纯分类/计数标签一律 6px 直角，999 只留给带状态点的 chip
+  for (const rule of [
+    /\.fs-row \.badge-mine \{[^}]*border-radius: var\(--ow-radius-tag\)/,
+    /\.folder-card \.tag \{[^}]*border-radius: var\(--ow-radius-tag\)/,
+    /\.fd-head \.tag \{[^}]*border-radius: var\(--ow-radius-tag\)/,
+    /\.fs-group__lbl \.ct \{[^}]*border-radius: var\(--ow-radius-tag\)/,
+    // W5 移交 B②：.fs-row .prio-pill 全族零消费方已整族撤，形状断言随之退场
+    // （反向断言见下方「dead desktop-surfaces families」清单）。
+    /\.src-pill \{[^}]*border-radius: var\(--ow-radius-tag\)/,
+    /\.tag-input \.tp \{[^}]*border-radius: var\(--ow-radius-tag\)/,
+  ]) {
+    assert.match(styles, rule)
+  }
+  // §7 读数：分组计数标是计数，mono ＋ tabular-nums
+  assert.match(styles, /\.fs-group__lbl \.ct \{[^}]*var\(--ow-font-mono\)[^}]*tabular-nums/)
+  // §6：hover-only 显影一律补键盘兜底，否则 Tab/触屏摸不到这些按钮
+  // R2 L2-2-6：四处显影同批补 pointer-events——隐形（opacity:0）却可点的按钮不算显影控制。
+  assert.match(styles, /\.fs-row \.more:focus-visible \{ opacity: 1; pointer-events: auto; \}/)
+  assert.match(styles, /\.fs-row \.open\.hover-only:focus-visible \{ opacity: 1; pointer-events: auto; \}/)
+  assert.match(styles, /\.fs-row \.row-acts:focus-within \{ opacity: 1; pointer-events: auto; \}/)
+  assert.match(styles, /\.file-card \.acts:focus-within \{ opacity: 1; pointer-events: auto; \}/)
+  for (const re of [
+    /\.fs-row \.more \{[^}]*opacity: 0; pointer-events: none;/s,
+    /\.fs-row \.open\.hover-only \{ opacity: 0; pointer-events: none;/,
+    /\.fs-row \.row-acts \{[^}]*opacity: 0; pointer-events: none;/s,
+    /\.file-card \.acts \{[^}]*opacity: 0; pointer-events: none;/s,
+    /\.file-row \.more \{[^}]*opacity: 0; pointer-events: none;/s,
+  ]) {
+    assert.match(styles, re)
+  }
+  // 时间轴脊线走语义位而不是直接引边框色
+  assert.match(styles, /\.mem-day__list \{[^}]*border-left: 1\.5px solid var\(--ow-timeline\)/)
+})
+
+test("one segmented-control shape survives, and the workspace rail follows SidebarCurrent", () => {
+  // 判据「分段器/页签只留一套形状」：.seg--prio 不再重画外壳/段边/选中面
+  assert.match(styles, /\.seg--prio \{ display: flex; \}/)
+  assert.doesNotMatch(styles, /\.seg--prio \.seg__opt \{[^}]*border:/)
+  assert.doesNotMatch(styles, /\.seg--prio \.seg__opt\.prio-\w+\.on/)
+  // §6 四态：合并后的唯一一套要自带 hover / press / focus / disabled
+  assert.match(styles, /\.seg__opt:hover:not\(\.on\):not\(:disabled\)/)
+  assert.match(styles, /\.seg__opt:active:not\(:disabled\)/)
+  assert.match(styles, /\.seg__opt:focus-visible \{[^}]*var\(--ow-focus-ring\)/)
+  assert.match(styles, /\.seg__opt:disabled \{[^}]*var\(--ow-disabled-text\)/)
+  // §5/§6：导航当前项＝--ow-current-bg（同 .snav.active），图标位无彩且归 32 档
+  assert.match(styles, /\.rail-item\.active \{ background: var\(--ow-current-bg\); \}/)
+  assert.doesNotMatch(styles, /\.rail-item\.active \.ico \{[^}]*var\(--ow-info/)
+  assert.match(styles, /\.rail-item \.ico \{[^}]*width: 32px; height: 32px/)
+})
+
+test("dead desktop-surfaces families are gone for good", () => {
+  /* 墓碑注释里还写着这些族名（记录撤除理由），所以断言压的是剥掉注释后的规则文本。 */
+  const rules = styles.replace(/\/\*[\s\S]*?\*\//g, "")
+  for (const selector of [
+    "\\.setup-head",
+    "\\.fs-row \\.prio-pill",
+    "\\.tier-filter",
+    "\\.model-row",
+    "\\.model-list",
+    "\\.setup-foot",
+    "\\.btn--icon",
+    "\\.files2__head",
+    "\\.files2__search",
+    "\\.ftable__row",
+    "\\.fskill",
+    "\\.task-row",
+    // W5 移交 B②（共享 CSS 死码清除批）
+    "\\.cbtn-count",
+    "\\.json-err",
+    "\\.permission-badge",
+    "\\.mem-search",
+    "\\.cmd-list",
+    "\\.cmd-group",
+    "\\.cmd-opt",
+    "\\.cmd-empty",
+    "\\.cpop--cmd",
+    "\\.skill-import-result__list",
+    "\\.skill-import-result__item",
+    "\\.skill-import-result__status",
+  ]) {
+    assert.doesNotMatch(rules, new RegExp(`^\\s*${selector}[\\s.:,{]`, "m"))
+  }
+})
+
+test("R2：「返回」归口 composite/BackButton，‹ 字符排版与它的备料 CSS 一并退役", () => {
+  // B0 核对：`fs-back` 是 e2e 定位钩子（workspace-interactions.spec.ts 按 .fs-back + '项目' 点返回），
+  // 8dd59a6 换 BackButton 时丢了，补回；CSS 侧仍不得有 .fs-back 形状规则（下一条断言）。
+  assert.match(source, /<BackButton className="fs-back" label="返回项目" onClick=\{onBack\}>/)
+  assert.doesNotMatch(source, /‹/)
+  // 只认选择器（行首），注释里提到旧类名不算残留
+  assert.doesNotMatch(styles, /^\s*\.fs-back[\s.:{,]/m)
+})
+
+test("R2：§8 中文眉标——分组标题不加 uppercase，走 eyebrow-cjk 档", () => {
+  const lbl = styles.match(/^\.fs-group__lbl \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(lbl, /font: 500 var\(--ow-fs-eyebrow-cjk\)/)
+  assert.match(lbl, /color: var\(--ow-eyebrow\)/)
+  assert.match(lbl, /letter-spacing: 0\.08em/)
+  assert.doesNotMatch(lbl, /text-transform: uppercase/)
+})
+
+test("R2：记忆卡回到卡骨架——容器 14 内距 ＋ 语义圆角档", () => {
+  const note = styles.match(/^\.mem-note \{ display: flex;[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(note, /padding: 14px;/)
+  assert.match(note, /border-radius: var\(--ow-radius-card\)/)
+  assert.doesNotMatch(note, /15px|17px|--ow-radius-lg/)
+})
+
+test("R2：.fs-row .memo-ic 死族整族撤（含族内混着的两套 tint 口径）", () => {
+  assert.doesNotMatch(styles, /^\s*\.fs-row \.memo-ic[\s.:{,]/m)
+  assert.doesNotMatch(source, /memo-ic/)
+})