@orbit-work/ui 0.1.0

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

@@ -0,0 +1,373 @@
+"use client"
+
+import { type ReactNode, useId } from "react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives/Button"
+import { EmptyState } from "../../primitives/EmptyState"
+import { Skeleton } from "../Skeleton"
+
+/**
+ * DataTable — DS 2.0 数据表（蓝图批次② 模式件 · R3 中性件，无信标元素）。
+ *
+ * 立面（§5）：贴地容器 0 影 + 1px `--ow-border`；表头底 `--ow-surface-2`（嵌套井档），
+ * 行分隔 1px `--ow-border`；行 hover `--ow-hover` / press `--ow-press`（地面/面板档，
+ * 不是 pop 档——表格不是弹层）。
+ * 度量（§7）：行高 40（`--ow-row-h`），密档 32（`--ow-row-h-dense`）；容器圆角 12
+ * （`--ow-radius-card`）。
+ * 读数：`numeric` 列一律 mono + tabular-nums + 右对齐。
+ * 状态（§6）：排序头 default/hover/press/focus-visible/disabled 齐；容器三态
+ * 空（EmptyState 原语）/ 载（Skeleton 行，呼吸禁 shimmer）/ 错（`error` 一句人话 + mono 详情）。
+ */
+
+export type DataTableAlign = "start" | "end"
+export type DataTableSortDirection = "asc" | "desc"
+export type DataTableSort = { key: string; direction: DataTableSortDirection }
+export type DataTableDensity = "default" | "dense"
+
+export interface DataTableColumn<T> {
+  /** 列标识；排序以此为键 */
+  key: string
+  /** 表头内容 */
+  header: ReactNode
+  /** 单元格渲染；缺省取 row[key] 的字符串形态 */
+  render?: (row: T, rowIndex: number) => ReactNode
+  /** 数字列：mono + tabular-nums + 右对齐（§7 读数口径） */
+  numeric?: boolean
+  /** 手动对齐；numeric 列默认 end */
+  align?: DataTableAlign
+  /** 该列可排序（表头变按钮，带三态排序图标） */
+  sortable?: boolean
+  /** 列宽，如 "160px" / "20%" */
+  width?: string | number
+  /** 表头为图标等非文本时的可访问名 */
+  headerLabel?: string
+}
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[]
+  rows: T[]
+  /** 行 key 取值 */
+  rowKey: (row: T, index: number) => string
+  /** 行高档：default=40 · dense=32 */
+  density?: DataTableDensity
+  /** 当前排序；null = 未排序 */
+  sort?: DataTableSort | null
+  /** 点击可排序表头：asc → desc → 取消（传 null）三态循环 */
+  onSortChange?: (sort: DataTableSort | null) => void
+  /** 加载态：渲染 Skeleton 行，表头保留 */
+  loading?: boolean
+  /** 加载态骨架行数，默认 5 */
+  loadingRows?: number
+  /** 空态一句话（人话、不感叹、无 emoji），缺省「还没有数据」 */
+  emptyMessage?: ReactNode
+  /** 空态主按钮 */
+  emptyActionLabel?: string
+  onEmptyAction?: () => void
+  /** 错误一句人话；非空时替代表体 */
+  error?: string
+  /** 错误技术详情，mono ≤2 行 */
+  errorDetail?: string
+  /** 行点击（存在时行获得指针与键盘可达性） */
+  onRowClick?: (row: T, index: number) => void
+  /** 选中行 key（选中底 `--ow-selected-bg`，配合行首内容自带文字编码，R1） */
+  selectedRowKey?: string
+  /** 表格上方工具条槽（放 FilterBar / DataTableToolbar） */
+  toolbar?: ReactNode
+  /** 屏读用表格说明 */
+  caption?: string
+  /** 表头吸顶（z = --ow-z-sticky） */
+  stickyHeader?: boolean
+  className?: string
+}
+
+const cellPadding = "px-3"
+
+/**
+ * 排序指示：上/下箭头两枚叠置，激活的一枚取 text，另一枚 text-3。
+ * R1 双编码——方向由箭头「形状/位置」表达，颜色只是第二编码；未排序两枚同为 text-3。
+ */
+function SortGlyph({ direction }: { direction?: DataTableSortDirection }) {
+  return (
+    <svg
+      className="shrink-0 w-3.5 h-3.5"
+      viewBox="0 0 14 14"
+      fill="none"
+      aria-hidden="true"
+      data-ow-part="sort-glyph"
+      data-ow-state={direction ?? "none"}
+    >
+      <desc>排序指示：上箭头为升序、下箭头为降序，激活方向着重显示。</desc>
+      <path
+        d="M4 6 7 3l3 3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={direction === "asc" ? "text-[color:var(--ow-text)]" : "text-[color:var(--ow-text-3)]"}
+      />
+      <path
+        d="M4 8l3 3 3-3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={direction === "desc" ? "text-[color:var(--ow-text)]" : "text-[color:var(--ow-text-3)]"}
+      />
+    </svg>
+  )
+}
+
+function nextSort(current: DataTableSort | null | undefined, key: string): DataTableSort | null {
+  if (!current || current.key !== key) return { key, direction: "asc" }
+  if (current.direction === "asc") return { key, direction: "desc" }
+  return null
+}
+
+function alignOf<T>(column: DataTableColumn<T>): DataTableAlign {
+  return column.align ?? (column.numeric ? "end" : "start")
+}
+
+export function DataTable<T>({
+  columns,
+  rows,
+  rowKey,
+  density = "default",
+  sort = null,
+  onSortChange,
+  loading = false,
+  loadingRows = 5,
+  emptyMessage = "还没有数据",
+  emptyActionLabel,
+  onEmptyAction,
+  error,
+  errorDetail,
+  onRowClick,
+  selectedRowKey,
+  toolbar,
+  caption,
+  stickyHeader = false,
+  className,
+}: DataTableProps<T>) {
+  const captionId = useId()
+  const rowHeight = density === "dense" ? "var(--ow-row-h-dense)" : "var(--ow-row-h)"
+  const showBody = !loading && !error && rows.length > 0
+  const showEmpty = !loading && !error && rows.length === 0
+
+  return (
+    <div
+      data-slot="data-table"
+      data-ow-density={density}
+      className={cn(
+        "w-full overflow-hidden bg-[var(--ow-surface)]",
+        "border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-card)]",
+        className,
+      )}
+    >
+      {toolbar}
+      <div className="w-full overflow-x-auto">
+        <table
+          className="w-full border-collapse text-ow-fs-ui text-[color:var(--ow-text)]"
+          aria-describedby={caption ? captionId : undefined}
+        >
+          {caption && (
+            <caption id={captionId} className="sr-only">
+              {caption}
+            </caption>
+          )}
+          <thead
+            data-ow-part="head"
+            className={cn("bg-[var(--ow-surface-2)]", stickyHeader && "sticky top-0 z-[var(--ow-z-sticky)]")}
+          >
+            <tr>
+              {columns.map((column) => {
+                const active = sort?.key === column.key ? sort.direction : undefined
+                const align = alignOf(column)
+                return (
+                  <th
+                    key={column.key}
+                    scope="col"
+                    data-ow-part="header-cell"
+                    aria-sort={
+                      column.sortable
+                        ? active === "asc"
+                          ? "ascending"
+                          : active === "desc"
+                            ? "descending"
+                            : "none"
+                        : undefined
+                    }
+                    style={{ width: column.width, height: rowHeight }}
+                    className={cn(
+                      cellPadding,
+                      "border-b border-[color:var(--ow-border)] font-medium",
+                      "text-[color:var(--ow-text-2)] whitespace-nowrap",
+                      align === "end" ? "text-right" : "text-left",
+                    )}
+                  >
+                    {column.sortable ? (
+                      <button
+                        type="button"
+                        data-ow-part="sort-button"
+                        data-ow-state={active ?? "none"}
+                        disabled={!onSortChange}
+                        aria-label={typeof column.header === "string" ? undefined : column.headerLabel}
+                        onClick={() => onSortChange?.(nextSort(sort, column.key))}
+                        className={cn(
+                          "inline-flex items-center gap-1.5 -mx-1 px-1 py-0.5 max-w-full",
+                          "bg-transparent border-none font-medium text-inherit cursor-pointer",
+                          "[border-radius:var(--ow-radius-2xs)]",
+                          "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+                          "hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+                          "focus-visible:outline-none focus-visible:[box-shadow:var(--ow-focus-shadow)]",
+                          "disabled:cursor-not-allowed disabled:text-[color:var(--ow-disabled-text)] disabled:bg-transparent",
+                          active && "text-[color:var(--ow-text)]",
+                          align === "end" && "flex-row-reverse",
+                        )}
+                      >
+                        <span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{column.header}</span>
+                        <SortGlyph direction={active} />
+                      </button>
+                    ) : (
+                      column.header
+                    )}
+                  </th>
+                )
+              })}
+            </tr>
+          </thead>
+          {showBody && (
+            <tbody data-ow-part="body">
+              {rows.map((row, rowIndex) => {
+                const key = rowKey(row, rowIndex)
+                const selected = selectedRowKey !== undefined && selectedRowKey === key
+                return (
+                  <tr
+                    key={key}
+                    data-ow-part="row"
+                    data-ow-role={selected ? "selected" : undefined}
+                    tabIndex={onRowClick ? 0 : undefined}
+                    aria-selected={selectedRowKey !== undefined ? selected : undefined}
+                    onClick={onRowClick ? () => onRowClick(row, rowIndex) : undefined}
+                    onKeyDown={
+                      onRowClick
+                        ? (event) => {
+                            // L3-2-1：只认落在行自己身上的键；行内的钮/链接自己处理 Enter/空格，
+                            // 不要在这里 preventDefault 把它们的默认 click 吃掉（鼠标路径有 stopPropagation，键盘没有）。
+                            if (event.target !== event.currentTarget) return
+                            if (event.key === "Enter" || event.key === " ") {
+                              event.preventDefault()
+                              onRowClick(row, rowIndex)
+                            }
+                          }
+                        : undefined
+                    }
+                    className={cn(
+                      "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+                      "border-b border-[color:var(--ow-border)] last:border-b-0",
+                      "hover:bg-[var(--ow-hover)]",
+                      selected && "bg-[var(--ow-selected-bg)]",
+                      onRowClick &&
+                        "cursor-pointer active:bg-[var(--ow-press)] focus-visible:outline-none focus-visible:[box-shadow:var(--ow-focus-shadow)]",
+                    )}
+                  >
+                    {columns.map((column) => {
+                      const align = alignOf(column)
+                      return (
+                        <td
+                          key={column.key}
+                          data-ow-part="cell"
+                          style={{ height: rowHeight }}
+                          className={cn(
+                            cellPadding,
+                            align === "end" ? "text-right" : "text-left",
+                            column.numeric &&
+                              "font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]",
+                          )}
+                        >
+                          {column.render
+                            ? column.render(row, rowIndex)
+                            : String((row as Record<string, unknown>)[column.key] ?? "")}
+                        </td>
+                      )
+                    })}
+                  </tr>
+                )
+              })}
+            </tbody>
+          )}
+          {loading && (
+            <tbody data-ow-part="loading" aria-busy="true">
+              {Array.from({ length: loadingRows }, (_, index) => (
+                <tr key={`skeleton-${index}`} className="border-b border-[color:var(--ow-border)] last:border-b-0">
+                  {columns.map((column) => (
+                    <td key={column.key} style={{ height: rowHeight }} className={cellPadding}>
+                      <Skeleton variant="line" height={12} width={column.numeric ? "48%" : "72%"} />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          )}
+        </table>
+      </div>
+      {showEmpty && (
+        /* R2 终扫：空态动作走 `action` 槽自传 secondary——空态不占行动极
+           （同 CatalogEmptyState / DesktopChatEmptyStateView）；EmptyState 的
+           actionLabel 快捷路径默认渲 primary，表格空态跟着它就多出一枚行动极。 */
+        <EmptyState
+          message={emptyMessage}
+          action={
+            emptyActionLabel ? (
+              <Button variant="secondary" size="md" onClick={onEmptyAction}>
+                {emptyActionLabel}
+              </Button>
+            ) : undefined
+          }
+          className="border-t border-[color:var(--ow-border)]"
+        />
+      )}
+      {error && (
+        <div
+          data-ow-part="error"
+          role="alert"
+          className="flex flex-col items-center gap-1.5 border-t border-[color:var(--ow-border)] px-4 py-8 text-center"
+        >
+          <p className="m-0 text-ow-fs-ui text-[color:var(--ow-text)]">{error}</p>
+          {errorDetail && (
+            <p className="m-0 max-w-full overflow-hidden text-ow-fs-mark-md leading-snug text-[color:var(--ow-text-3)] font-[family-name:var(--ow-font-mono)] [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2]">
+              {errorDetail}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export interface DataTableToolbarProps {
+  /** 左侧：标题 / 计数 / 筛选件 */
+  children?: ReactNode
+  /** 右侧动作区：按钮组 */
+  actions?: ReactNode
+  className?: string
+}
+
+/**
+ * DataTableToolbar — 贴在表格顶部的工具条外壳（FilterBar 的表格配方，见 FilterBar 文档）。
+ * 只负责贴合：底 `--ow-surface`、底边 1px、无自身圆角（由 DataTable 容器裁切）。
+ */
+export function DataTableToolbar({ children, actions, className }: DataTableToolbarProps) {
+  return (
+    <div
+      data-slot="data-table-toolbar"
+      className={cn(
+        "flex items-center gap-2 flex-wrap px-3 py-2",
+        "bg-[var(--ow-surface)] border-b border-[color:var(--ow-border)]",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2 flex-wrap min-w-0 flex-1">{children}</div>
+      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+    </div>
+  )
+}

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Copy, Edit, Trash } from "../Icons"
+import { DetailOverflowMenu, UninstallConfirmDialog } from "./index"
+
+const meta = {
+  title: "Composite/DetailChrome",
+  component: DetailOverflowMenu,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DetailOverflowMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultItems = [
+  { key: "edit", label: "编辑", icon: <Edit /> },
+  { key: "copy", label: "复制", icon: <Copy /> },
+  { key: "delete", label: "删除", icon: <Trash />, danger: true },
+]
+
+export const Default: Story = {
+  args: {
+    items: defaultItems,
+    onSelect: (key) => console.log("selected:", key),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    items: defaultItems,
+    disabled: true,
+    onSelect: (key) => console.log("selected:", key),
+  },
+}
+
+export const WithDisabledItems: Story = {
+  args: {
+    items: [
+      { key: "edit", label: "编辑", icon: <Edit /> },
+      { key: "copy", label: "复制", icon: <Copy />, disabled: true },
+      { key: "delete", label: "删除", icon: <Trash />, danger: true },
+    ],
+    onSelect: (key) => console.log("selected:", key),
+  },
+}
+
+export const ConfirmDialog: Story = {
+  render: () => (
+    <UninstallConfirmDialog
+      title="确认卸载"
+      description="卸载后将无法使用该工具，是否继续？"
+      onCancel={() => console.log("cancelled")}
+      onConfirm={() => console.log("confirmed")}
+    />
+  ),
+  parameters: {
+    layout: "fullscreen",
+  },
+}

package/src/components/composite/DetailChrome/DetailChromeSource.test.mjs

@@ -0,0 +1,31 @@
+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("溢出菜单归口 primitives/Menu，不再自管开合与定位", () => {
+  assert.match(source, /import \{ Menu, type MenuItem \} from "\.\.\/\.\.\/primitives\/Menu"/)
+  assert.doesNotMatch(source, /useState|useEffect|addEventListener/)
+  assert.doesNotMatch(source, /className="skd__more/)
+  assert.doesNotMatch(source, /from "\.\.\/\.\.\/primitives\/Dropdown"/)
+})
+
+test("触发器是 ghost icon-only 按钮，不再 unstyled 手搓", () => {
+  assert.match(source, /variant="ghost"/)
+  assert.doesNotMatch(source, /variant="unstyled"/)
+  assert.doesNotMatch(source, /btn btn--icon/)
+  assert.match(source, /aria-label=\{label\}/)
+})
+
+test("卸载确认归口 composite/Dialog 的 danger 便捷档，不再 createPortal 手搓模态", () => {
+  assert.match(source, /import \{ Dialog \} from "\.\.\/Dialog"/)
+  assert.match(source, /variant="danger"/)
+  assert.match(source, /confirmLabel="卸载"/)
+  assert.doesNotMatch(source, /createPortal|className="ow-modal-host"|className="ow-confirm"/)
+})
+
+test("中性件（R3）：禁信标/荧黄；无 Tailwind 歧义任意值", () => {
+  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+})

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

@@ -0,0 +1,94 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Button } from "../../primitives"
+import { Menu, type MenuItem } from "../../primitives/Menu"
+import { Dialog } from "../Dialog"
+import { More, Trash } from "../Icons"
+
+/**
+ * DetailChrome — 详情页头部零件（DS 2.0 模式层薄壳）。
+ *
+ * 蓝图批次② 已把菜单归口 `primitives/Menu`、模态归口 `composite/Dialog`；
+ * 本文件只留详情页语境下的两个配方，外观与状态全部由那两个基座承担：
+ * - 溢出菜单：ghost icon-only 触发器 + Menu（弹层内行 hover 走 -pop 档，portal 后 fixed 定位不被裁）。
+ * - 卸载确认：Dialog 的 danger 便捷确认档（scrim + modal 影 + 1px 边）。
+ * 中性件（R3）：不引信标/荧黄。旧 `.skd__more` / `.ow-confirm` 手搓样式已废止。
+ */
+
+/** @deprecated 改用 `MenuItem`（primitives/Menu）。保留字段以免包外 items 数组要改。 */
+export type DetailMenuItem = {
+  key: string
+  label: string
+  icon: ReactNode
+  danger?: boolean
+  disabled?: boolean
+}
+
+export function DetailOverflowMenu({
+  items,
+  disabled,
+  onSelect,
+  label = "更多操作",
+}: {
+  items: DetailMenuItem[]
+  disabled?: boolean
+  onSelect: (key: string) => void
+  /** 触发器无障碍名，默认「更多操作」 */
+  label?: string
+}) {
+  const menuItems: MenuItem[] = items.map((item) => ({
+    key: item.key,
+    label: item.label,
+    icon: item.icon,
+    danger: item.danger,
+    disabled: item.disabled,
+  }))
+
+  return (
+    <Menu
+      items={menuItems}
+      width={160}
+      align="end"
+      onSelect={onSelect}
+      ariaLabel={label}
+      trigger={
+        <Button
+          variant="ghost"
+          size="sm"
+          aria-label={label}
+          title={label}
+          disabled={disabled}
+          icon={<More width={16} height={16} aria-hidden="true" />}
+        />
+      }
+    />
+  )
+}
+
+export function UninstallConfirmDialog({
+  title,
+  description,
+  onCancel,
+  onConfirm,
+}: {
+  title: string
+  description: string
+  onCancel: () => void
+  onConfirm: () => void
+}) {
+  return (
+    <Dialog
+      open
+      variant="danger"
+      title={title}
+      icon={<Trash aria-hidden="true" />}
+      onClose={onCancel}
+      onConfirm={onConfirm}
+      confirmLabel="卸载"
+      cancelLabel="取消"
+    >
+      {description}
+    </Dialog>
+  )
+}