@orbit-work/ui 0.1.0

package/src/components/composite/DataManagementSectionView/DataManagementSectionView.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ReactNode } from "react"
+import { DataManagementSectionView, type SharedResourceItem } from "./index"
+
+/**
+ * 件级状态矩阵（R2 · L3-1-2 补）：此前只在 `Screens/SettingsSections` 的整屏里
+ * 出过一次满配图，`emptyMessage` 分支与「只有一组」的形从没被覆盖过。
+ */
+const meta = {
+  title: "Composite/DataManagementSectionView",
+  component: DataManagementSectionView,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DataManagementSectionView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function Frame({ children }: { children: ReactNode }) {
+  return (
+    <div style={{ maxWidth: 640, background: "var(--ow-bg-panel)", color: "var(--ow-text)", padding: 20 }}>
+      {children}
+    </div>
+  )
+}
+
+const SITES: SharedResourceItem[] = [
+  { id: "s1", name: "2026 年度复盘", url: "share.orbitwork.cn/s/9d21", access: "公开访问" },
+  { id: "s2", name: "客户提案 · 星野", url: "share.orbitwork.cn/s/4f08", access: "指定成员" },
+]
+
+const SHARES: SharedResourceItem[] = [
+  { id: "c1", name: "把季度数据整理成图表", url: "share.orbitwork.cn/c/71ba", access: "公开访问" },
+  { id: "c2", name: "内网 Jira 连接排障", url: "share.orbitwork.cn/c/2c5e", access: "指定成员" },
+  { id: "c3", name: "PPT 模板批量替换", url: "share.orbitwork.cn/c/8a33", access: "公开访问" },
+]
+
+const noop = () => {}
+
+/** 默认：两组都有内容。眉标 ＋ 卡行 ＋ 行末两枚 28 描边钮（「停止分享」只走 danger 文字色）。 */
+export const Default: Story = {
+  args: { sites: SITES, shares: SHARES, onCopyLink: noop, onRevoke: noop },
+  render: (args) => (
+    <Frame>
+      <DataManagementSectionView {...args} />
+    </Frame>
+  ),
+}
+
+/** 只有站点：会话组整段不渲染（`ResourceGroup` 空数组直接返回 null），不留空眉标。 */
+export const SitesOnly: Story = {
+  args: { sites: SITES, shares: [], onCopyLink: noop, onRevoke: noop },
+  render: (args) => (
+    <Frame>
+      <DataManagementSectionView {...args} />
+    </Frame>
+  ),
+}
+
+/** 只有会话。 */
+export const SharesOnly: Story = {
+  args: { sites: [], shares: SHARES, onCopyLink: noop, onRevoke: noop },
+  render: (args) => (
+    <Frame>
+      <DataManagementSectionView {...args} />
+    </Frame>
+  ),
+}
+
+/** 两组都空：整段让位给 `EmptyState` 缺省档（§6 容器空态）。 */
+export const Empty: Story = {
+  args: { sites: [], shares: [], onCopyLink: noop, onRevoke: noop },
+  render: (args) => (
+    <Frame>
+      <DataManagementSectionView {...args} />
+    </Frame>
+  ),
+}
+
+/** 自定义空态副句：`emptyMessage` 分支。 */
+export const EmptyWithCustomMessage: Story = {
+  args: {
+    sites: [],
+    shares: [],
+    emptyMessage: "这个工作区还没有对外发布过任何东西。",
+    onCopyLink: noop,
+    onRevoke: noop,
+  },
+  render: (args) => (
+    <Frame>
+      <DataManagementSectionView {...args} />
+    </Frame>
+  ),
+}
+
+/** 长名称：名与 mono 读数各自 truncate，两枚钮 `shrink-0` 不被挤扁。 */
+export const LongNames: Story = {
+  args: {
+    sites: [
+      {
+        id: "s1",
+        name: "2026 年第三季度经营复盘（含区域拆分与渠道归因）终稿 v7",
+        url: "share.orbitwork.cn/s/9d21c4b7e0f2a18d",
+        access: "指定成员（12 人）",
+      },
+    ],
+    shares: [
+      {
+        id: "c1",
+        name: "把上个季度所有渠道的数据整理成一份可以直接汇报的图表",
+        url: "share.orbitwork.cn/c/71ba09ff",
+        access: "公开访问",
+      },
+    ],
+    onCopyLink: noop,
+    onRevoke: noop,
+  },
+  render: (args) => (
+    <Frame>
+      <DataManagementSectionView {...args} />
+    </Frame>
+  ),
+}

package/src/components/composite/DataManagementSectionView/DataManagementSectionViewSource.test.mjs

@@ -0,0 +1,45 @@
+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 code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+test("A2-B5：两组齐了——已发布的站点 ＋ 本轮补上的已分享的会话（原型 2578–2600）", () => {
+  assert.match(code, /title="已发布的站点"/)
+  assert.match(code, /title="已分享的会话"/)
+  assert.match(code, /sites=\{sites\}|items=\{sites\}/)
+  assert.match(code, /items=\{shares\}/)
+})
+
+// R3（2026-09-04，Terry 意见 5）：卡形整枚作废，两组的条目回到**分隔线行**——
+// 贴边零内距、上下 12、行与行之间 1px --ow-border（`[data-ow-part=row]+&` 只在兄弟行之间画，
+// 组标题下不多一条）；组容器 gap-0 让那条线连成一条，组间距仍由外层 gap-3.5 给。
+test("眉标走 §8 中文口径；行是分隔线行（贴边零内距 · 上下 12 · 行间 1px --ow-border · 贴地零影）", () => {
+  assert.match(code, /--ow-fs-eyebrow-cjk,12px/)
+  assert.match(code, /--ow-ls-eyebrow-cjk,0\.08em/)
+  assert.match(code, /text-\[color:var\(--ow-eyebrow\)\]/)
+  assert.match(code, /data-ow-part="row"/)
+  assert.match(code, /px-0 py-3 border-\[color:var\(--ow-border\)\] \[\[data-ow-part=row\]\+&\]:border-t/)
+  // 卡形三件（1px 边 ＋ radius-lg ＋ surface 底）不得回流
+  assert.doesNotMatch(code, /\[border-radius:var\(--ow-radius-lg\)\]/)
+  assert.doesNotMatch(code, /bg-\[var\(--ow-surface\)\]/)
+  assert.match(code, /data-ow-part="group" className="flex flex-col gap-0 min-w-0"/)
+  assert.doesNotMatch(code, /shadow|backdrop-filter/)
+})
+
+test("§7 读数一律 mono + tabular-nums（链接 · 权限那一行）", () => {
+  assert.match(code, /\[font-family:var\(--ow-font-mono\)\] \[font-variant-numeric:tabular-nums\]/)
+})
+
+test("§4 行动极：两枚动作都是 secondary 描边，「停止分享」只换 --ow-danger 文字色", () => {
+  assert.equal((code.match(/variant="secondary" size="sm"/g) ?? []).length, 1)
+  assert.match(code, /text-\[color:var\(--ow-danger\)\]/)
+  assert.doesNotMatch(code, /variant="danger"|variant="primary"/)
+  assert.doesNotMatch(code, /--ow-beacon|--ow-yellow/)
+})
+
+test("§6 容器空态：两组都空时走 EmptyState，不自绘一行假列表", () => {
+  assert.match(code, /import \{ EmptyState \}/)
+  assert.match(code, /<EmptyState message=\{emptyMessage\} \/>/)
+})

package/src/components/composite/DataManagementSectionView/index.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives/Button"
+import { EmptyState } from "../../primitives/EmptyState"
+
+/**
+ * DataManagementSectionView — 设置「数据管理」段（A2-B5 · 原型 2578–2600）
+ *
+ * 两组「发出去还能收回来的东西」：**已发布的站点** 与 **已分享的会话**。
+ * 原来只有站点一半，会话那一半在仓库里没有落点（裁决 2 点名要补）。
+ * 每组＝眉标（§8 中文 500 / `--ow-fs-eyebrow-cjk` / `--ow-ls-eyebrow-cjk` / `--ow-eyebrow`）
+ * ＋ 若干条卡行：名称（fs-ui/500，截断）＋ 一行 mono 读数「链接 · 权限」（fs-caption/text-2）
+ * ＋ 右侧两枚 28 高描边钮：「复制链接」与 danger 文字色的「停止分享」。
+ * 行：R3（Terry 意见 5）撤卡——贴边零内距、上下 12、行与行之间 1px `--ow-border`（§5 贴地零影）。
+ * 「停止分享」是**破坏性动作但不是主行动**——按 §4 走描边形＋`--ow-danger` 文字，
+ * 不用实心 danger 填充（一屏两组共 4 枚，实心会读成四个行动极）。
+ */
+export interface SharedResourceItem {
+  id: string
+  /** 站点名 / 会话名 */
+  name: string
+  /** 分享链接（mono 读数），如 `share.orbitwork.cn/s/9d21` */
+  url: string
+  /** 权限标签，如「公开访问」「指定成员」 */
+  access: string
+}
+
+export interface DataManagementSectionViewProps {
+  sites: SharedResourceItem[]
+  shares: SharedResourceItem[]
+  onCopyLink: (item: SharedResourceItem) => void
+  onRevoke: (item: SharedResourceItem) => void
+  /** 两组都空时的一句话（§6 容器空态） */
+  emptyMessage?: string
+  className?: string
+}
+
+const eyebrowClass = [
+  "font-medium leading-none m-0",
+  "text-[length:var(--ow-fs-eyebrow-cjk,12px)]",
+  "tracking-[var(--ow-ls-eyebrow-cjk,0.08em)]",
+  "text-[color:var(--ow-eyebrow)]",
+].join(" ")
+
+function ResourceGroup({
+  title,
+  items,
+  onCopyLink,
+  onRevoke,
+}: {
+  title: string
+  items: SharedResourceItem[]
+  onCopyLink: (item: SharedResourceItem) => void
+  onRevoke: (item: SharedResourceItem) => void
+}) {
+  if (items.length === 0) return null
+  return (
+    <section data-ow-part="group" className="flex flex-col gap-0 min-w-0">
+      <h3 data-ow-part="group-title" className={cn(eyebrowClass, "pb-1")}>
+        {title}
+      </h3>
+      {items.map((item) => (
+        <div
+          key={item.id}
+          data-ow-part="row"
+          // R3（Terry 意见 5）：卡 → 分隔线行（贴边零内距、上下 12、行间 1px --ow-border）
+          className="flex items-center gap-3 min-w-0 px-0 py-3 border-[color:var(--ow-border)] [[data-ow-part=row]+&]:border-t"
+        >
+          <div className="flex-1 min-w-0 flex flex-col gap-0.5">
+            <span className="truncate text-ow-fs-ui font-medium leading-[1.3] text-[color:var(--ow-text)]">
+              {item.name}
+            </span>
+            <span className="truncate text-[length:var(--ow-fs-caption,12px)] leading-[1.4] text-[color:var(--ow-text-2)] [font-family:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]">
+              {item.url} · {item.access}
+            </span>
+          </div>
+          <Button variant="secondary" size="sm" className="shrink-0" onClick={() => onCopyLink(item)}>
+            复制链接
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            className="shrink-0 text-[color:var(--ow-danger)] hover:text-[color:var(--ow-danger)]"
+            onClick={() => onRevoke(item)}
+          >
+            停止分享
+          </Button>
+        </div>
+      ))}
+    </section>
+  )
+}
+
+export function DataManagementSectionView({
+  sites,
+  shares,
+  onCopyLink,
+  onRevoke,
+  emptyMessage = "还没有发布出去的站点或分享出去的会话。",
+  className,
+}: DataManagementSectionViewProps) {
+  if (sites.length === 0 && shares.length === 0) return <EmptyState message={emptyMessage} />
+  return (
+    <div data-slot="data-management" className={cn("flex flex-col gap-3.5 min-w-0", className)}>
+      <ResourceGroup title="已发布的站点" items={sites} onCopyLink={onCopyLink} onRevoke={onRevoke} />
+      <ResourceGroup title="已分享的会话" items={shares} onCopyLink={onCopyLink} onRevoke={onRevoke} />
+    </div>
+  )
+}

package/src/components/composite/DataTable/DataTable.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Button } from "../../primitives/Button"
+import { Tag } from "../Tag"
+import { DataTable, type DataTableColumn, type DataTableSort, DataTableToolbar } from "./index"
+
+type Run = {
+  id: string
+  task: string
+  owner: string
+  duration: number
+  cost: number
+  state: "运行中" | "已完成" | "失败"
+}
+
+const rows: Run[] = [
+  { id: "r-1041", task: "季度销售复盘", owner: "林筱", duration: 342, cost: 12480, state: "已完成" },
+  { id: "r-1042", task: "站点回归巡检", owner: "赵珩", duration: 96, cost: 3120, state: "运行中" },
+  { id: "r-1043", task: "客户合同抽检", owner: "陈屿", duration: 1284, cost: 26900, state: "已完成" },
+  { id: "r-1044", task: "周报汇总", owner: "林筱", duration: 58, cost: 890, state: "失败" },
+  { id: "r-1045", task: "竞品价格抓取", owner: "沈砚", duration: 704, cost: 15230, state: "已完成" },
+]
+
+const stateVariant = { 运行中: "info", 已完成: "success", 失败: "error" } as const
+
+const columns: DataTableColumn<Run>[] = [
+  { key: "id", header: "运行 ID", numeric: true, sortable: true, width: 110 },
+  { key: "task", header: "任务", sortable: true },
+  { key: "owner", header: "发起人", width: 96 },
+  {
+    key: "state",
+    header: "状态",
+    width: 96,
+    render: (row) => (
+      <Tag variant={stateVariant[row.state]} size="sm" dot>
+        {row.state}
+      </Tag>
+    ),
+  },
+  // 可排序表头 = 文案 + 排序钮 + SortGlyph：列宽要放得下整个头，否则示例里读不出列名
+  { key: "duration", header: "用时（秒）", numeric: true, sortable: true, width: 132 },
+  { key: "cost", header: "消耗 token", numeric: true, sortable: true, width: 120 },
+]
+
+const meta = {
+  title: "Composite/DataTable",
+  component: DataTable,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DataTable<Run>>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const base = {
+  columns,
+  rows,
+  rowKey: (row: Run) => row.id,
+  caption: "近期运行记录",
+}
+
+export const Default: Story = {
+  args: base,
+}
+
+export const Dense: Story = {
+  name: "密档（行高 32）",
+  args: { ...base, density: "dense" },
+}
+
+export const Sortable: Story = {
+  name: "排序三态（升 → 降 → 取消）",
+  args: base,
+  render: (args) => {
+    const [sort, setSort] = useState<DataTableSort | null>({ key: "cost", direction: "desc" })
+    return <DataTable {...args} sort={sort} onSortChange={setSort} />
+  },
+}
+
+export const SortDisabled: Story = {
+  name: "排序禁用（未接 onSortChange）",
+  args: { ...base, sort: { key: "cost", direction: "asc" } },
+}
+
+export const RowInteraction: Story = {
+  name: "行可点 + 选中态",
+  args: base,
+  render: (args) => {
+    const [selected, setSelected] = useState("r-1043")
+    return <DataTable {...args} selectedRowKey={selected} onRowClick={(row) => setSelected(row.id)} />
+  },
+}
+
+export const WithToolbar: Story = {
+  name: "带工具条槽",
+  args: {
+    ...base,
+    toolbar: (
+      <DataTableToolbar actions={<Button size="sm">导出</Button>}>
+        <span className="text-ow-fs-ui text-[color:var(--ow-text-2)]">近 7 天运行</span>
+        <span className="text-ow-fs-mark-md text-[color:var(--ow-text-3)] font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]">
+          5 条
+        </span>
+      </DataTableToolbar>
+    ),
+  },
+}
+
+export const Loading: Story = {
+  name: "加载（Skeleton 行）",
+  args: { ...base, rows: [], loading: true },
+}
+
+export const Empty: Story = {
+  name: "空态（EmptyState 原语）",
+  args: {
+    ...base,
+    rows: [],
+    emptyMessage: "这段时间没有运行记录",
+    emptyActionLabel: "新建任务",
+    onEmptyAction: () => {},
+  },
+}
+
+export const ErrorState: Story = {
+  name: "错误（一句人话 + mono 详情）",
+  args: {
+    ...base,
+    rows: [],
+    error: "没能取到运行记录，稍后再试一次。",
+    errorDetail: "GET /api/runs → 503 upstream_unavailable (req_9f3a1c)",
+  },
+}
+
+export const StickyHeader: Story = {
+  name: "表头吸顶",
+  args: { ...base, stickyHeader: true },
+  render: (args) => (
+    <div style={{ height: 220, overflowY: "auto" }}>
+      <DataTable {...args} rows={[...rows, ...rows.map((row) => ({ ...row, id: `${row.id}-b` }))]} />
+    </div>
+  ),
+}
+
+/** 双主题对照：同一份 demo 逐字复制，主题由 data-theme 局部驱动，组件内不写死主题。 */
+export const ThemePair: Story = {
+  name: "双主题对照",
+  args: base,
+  render: (args) => (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+      <div data-theme="light" style={{ background: "var(--ow-bg)", padding: 16 }}>
+        <DataTable {...args} />
+      </div>
+      <div data-theme="dark" style={{ background: "var(--ow-bg)", padding: 16 }}>
+        <DataTable {...args} />
+      </div>
+    </div>
+  ),
+}

package/src/components/composite/DataTable/DataTableSource.test.mjs

@@ -0,0 +1,96 @@
+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 stories = await readFile(new URL("./DataTable.stories.tsx", import.meta.url), "utf8")
+
+test("DataTable 是 R3 中性件：无信标/荧黄任何形态", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
+})
+
+test("表头底 = --ow-surface-2（嵌套井档），行分隔 1px --ow-border", () => {
+  assert.match(source, /bg-\[var\(--ow-surface-2\)\]/)
+  assert.match(source, /border-b border-\[color:var\(--ow-border\)\]/)
+})
+
+test("行高 40 / 密档 32 走 row-h token，容器贴地 0 影 + 1px 边 + 圆角 12", () => {
+  assert.match(source, /var\(--ow-row-h-dense\)/)
+  assert.match(source, /var\(--ow-row-h\)/)
+  assert.match(source, /border border-\[color:var\(--ow-border\)\] \[border-radius:var\(--ow-radius-card\)\]/)
+  assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow/)
+})
+
+test("行 hover 用地面档 --ow-hover / press --ow-press（表格不是弹层，不用 pop 档）", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\]/)
+  assert.match(source, /active:bg-\[var\(--ow-press\)\]/)
+  assert.doesNotMatch(source, /--ow-hover-pop|--ow-press-pop/)
+})
+
+test("数字列 mono + tabular-nums + 右对齐", () => {
+  assert.match(
+    source,
+    /column\.numeric &&\s*"font-\[family-name:var\(--ow-font-mono\)\] \[font-variant-numeric:tabular-nums\]"/,
+  )
+  assert.match(source, /column\.align \?\? \(column\.numeric \? "end" : "start"\)/)
+})
+
+test("排序三态循环 asc → desc → null，且 aria-sort 与箭头形差双编码（R1）", () => {
+  assert.match(source, /if \(current\.direction === "asc"\) return \{ key, direction: "desc" \}/)
+  assert.match(source, /return null/)
+  assert.match(source, /aria-sort=/)
+  assert.match(source, /data-ow-part="sort-glyph"/)
+})
+
+test("排序头状态齐：hover / active / focus-visible / disabled 逐 token（无统一透明度）", () => {
+  assert.match(source, /focus-visible:\[box-shadow:var\(--ow-focus-shadow\)\]/)
+  assert.match(source, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
+  // 断言里不写全字面量，避免 check-ds2 的 disabled 规则误伤本测试文件
+  assert.doesNotMatch(source, new RegExp(["disabled:", "opacity-"].join("")))
+  assert.doesNotMatch(source, new RegExp(["--ow-opacity", "-disabled"].join("")))
+})
+
+test("容器三态：空态走 EmptyState 原语、加载走 Skeleton 行、错误一句人话 + mono 详情", () => {
+  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/primitives\/EmptyState"/)
+  assert.match(source, /<Skeleton variant="line"/)
+  assert.match(source, /data-ow-part="error"[\s\S]*role="alert"/)
+  assert.match(source, /errorDetail[\s\S]*font-\[family-name:var\(--ow-font-mono\)\]/)
+})
+
+test("动效只用 ease-beacon + 120/200/320 档", () => {
+  assert.match(source, /ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, /duration-\[(?!var\(--ow-dur-[123]\))/)
+})
+
+test("z 用 --ow-z-* 梯度（吸顶表头 = sticky 档）", () => {
+  assert.match(source, /z-\[var\(--ow-z-sticky\)\]/)
+})
+
+test("Tailwind 任意值 var() 全部带类型标注（ambiguous-arbitrary 铁律）", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+test("stories 覆盖全部变体状态 + 双主题、不写死主题", () => {
+  for (const name of [
+    "Dense",
+    "Sortable",
+    "SortDisabled",
+    "RowInteraction",
+    "WithToolbar",
+    "Loading",
+    "Empty",
+    "ErrorState",
+    "StickyHeader",
+    "ThemePair",
+  ]) {
+    assert.match(stories, new RegExp(`export const ${name}\\b`))
+  }
+  assert.match(stories, /data-theme="light"/)
+  assert.match(stories, /data-theme="dark"/)
+})
+
+test("DataTableToolbar 是贴合工具条外壳（底 surface + 底边 1px，无自身圆角）", () => {
+  assert.match(source, /export function DataTableToolbar/)
+  assert.match(source, /data-slot="data-table-toolbar"/)
+})