@orbit-work/ui 0.1.0

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

@@ -0,0 +1,364 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { FileReferenceCard, FileReferenceCards, type FileReferenceItem, type FileReferenceMenuOption } from "./index"
+
+const meta = {
+  title: "Files/FileReferenceCard",
+  component: FileReferenceCard,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '已并入 Domain/Chat/Attachment（variant="card" ＋ AttachmentList layout="stack"）。本页是 @deprecated 兼容层。',
+      },
+    },
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FileReferenceCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleItem: FileReferenceItem = {
+  id: "1",
+  name: "README.md",
+  path: "/projects/my-app/README.md",
+}
+
+const sampleOpenWithOptions: FileReferenceMenuOption[] = [
+  {
+    id: "vscode",
+    name: "Visual Studio Code",
+    kind: "app",
+    isDefault: true,
+    iconName: "Terminal",
+  },
+  {
+    id: "typora",
+    name: "Typora",
+    kind: "app",
+    iconName: "Edit",
+  },
+  { id: "divider-1", kind: "divider" },
+  {
+    id: "copy",
+    name: "复制路径",
+    kind: "action",
+    iconName: "Copy",
+  },
+  {
+    id: "reveal",
+    name: "在文件夹中显示",
+    kind: "action",
+    iconName: "Folder",
+  },
+]
+
+export const Default: Story = {
+  args: {
+    item: sampleItem,
+    onOpen: (item) => console.log("open:", item),
+  },
+}
+
+export const WithOpenWithMenu: Story = {
+  render: () => {
+    const [lastAction, setLastAction] = useState("")
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <FileReferenceCard
+          item={sampleItem}
+          onOpen={(item) => setLastAction(`打开: ${item.name}`)}
+          onRequestOpenWithOptions={() => sampleOpenWithOptions}
+          onOpenWith={(item, option) => setLastAction(`用 ${option.name} 打开: ${item.name}`)}
+        />
+        {lastAction && <div style={{ fontSize: 12, color: "var(--ow-text-3)" }}>最后操作: {lastAction}</div>}
+      </div>
+    )
+  },
+}
+
+export const NonClickable: Story = {
+  args: {
+    item: {
+      name: "config.json",
+      path: "/etc/app/config.json",
+      badge: "JSON",
+      typeLabel: "配置文件",
+    },
+    onRequestOpenWithOptions: () => sampleOpenWithOptions,
+    onOpenWith: (item, option) => console.log("open with:", option.name, item),
+  },
+}
+
+export const DifferentFileTypes: Story = {
+  render: () => {
+    const files: FileReferenceItem[] = [
+      { id: "1", name: "presentation.pptx", path: "/docs/presentation.pptx" },
+      { id: "2", name: "report.docx", path: "/docs/report.docx" },
+      { id: "3", name: "data.xlsx", path: "/docs/data.xlsx" },
+      { id: "4", name: "photo.jpg", path: "/images/photo.jpg" },
+      { id: "5", name: "video.mp4", path: "/media/video.mp4" },
+      { id: "6", name: "guide.pdf", path: "/docs/guide.pdf" },
+      { id: "7", name: "index.html", path: "/web/index.html" },
+      { id: "8", name: "utils.ts", path: "/src/utils.ts" },
+    ]
+
+    return <FileReferenceCards items={files} onOpen={(item) => console.log("open:", item)} />
+  },
+}
+
+export const WithCustomBadgeAndType: Story = {
+  args: {
+    item: {
+      name: "premium-doc.pdf",
+      path: "/downloads/premium-doc.pdf",
+      badge: "$",
+      typeLabel: "付费内容",
+    },
+    onOpen: (item) => console.log("open:", item),
+  },
+}
+
+export const LongFileName: Story = {
+  args: {
+    item: {
+      name: "very-long-filename-that-should-be-truncated-with-ellipsis.md",
+      path: "/projects/docs/very-long-filename-that-should-be-truncated-with-ellipsis.md",
+    },
+    onOpen: (item) => console.log("open:", item),
+  },
+}
+
+export const WithAsyncOpenWithOptions: Story = {
+  render: () => {
+    const [lastAction, setLastAction] = useState("")
+
+    const loadOptions = async (): Promise<FileReferenceMenuOption[]> => {
+      await new Promise((resolve) => setTimeout(resolve, 800))
+      return [
+        { id: "header-1", kind: "header", name: "应用程序" },
+        {
+          id: "app1",
+          name: "VS Code",
+          kind: "app",
+          iconName: "Terminal",
+        },
+        {
+          id: "app2",
+          name: "Sublime Text",
+          kind: "app",
+          iconName: "Edit",
+        },
+        { id: "divider-1", kind: "divider" },
+        { id: "header-2", kind: "header", name: "操作" },
+        {
+          id: "copy",
+          name: "复制路径",
+          kind: "action",
+          iconName: "Copy",
+        },
+      ]
+    }
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <FileReferenceCard
+          item={{ name: "app.ts", path: "/src/app.ts" }}
+          onOpen={(item) => setLastAction(`打开: ${item.name}`)}
+          onRequestOpenWithOptions={loadOptions}
+          onOpenWith={(item, option) => setLastAction(`用 ${option.name} 打开: ${item.name}`)}
+        />
+        {lastAction && <div style={{ fontSize: 12, color: "var(--ow-text-3)" }}>{lastAction}</div>}
+      </div>
+    )
+  },
+}
+
+export const MultipleFiles: Story = {
+  render: () => {
+    const items: FileReferenceItem[] = [
+      { id: "1", name: "App.tsx", path: "/src/App.tsx" },
+      { id: "2", name: "styles.css", path: "/src/styles.css" },
+      { id: "3", name: "package.json", path: "/package.json" },
+      { id: "4", name: "README.md", path: "/README.md" },
+      { id: "5", name: "logo.png", path: "/public/logo.png" },
+    ]
+
+    return (
+      <FileReferenceCards
+        items={items}
+        onOpen={(item) => console.log("open:", item)}
+        onRequestOpenWithOptions={() => sampleOpenWithOptions}
+        onOpenWith={(item, option) => console.log("open with:", option.name, item)}
+      />
+    )
+  },
+}
+
+export const WithDisabledOption: Story = {
+  render: () => (
+    <FileReferenceCard
+      item={{ name: "locked.pdf", path: "/docs/locked.pdf" }}
+      onOpen={(item) => console.log("open:", item)}
+      onRequestOpenWithOptions={() => [
+        {
+          id: "preview",
+          name: "预览",
+          kind: "app",
+          iconName: "Search",
+        },
+        {
+          id: "edit",
+          name: "编辑",
+          kind: "app",
+          iconName: "Edit",
+          disabled: true,
+        },
+        { id: "divider-1", kind: "divider" },
+        {
+          id: "copy",
+          name: "复制路径",
+          kind: "action",
+          iconName: "Copy",
+        },
+      ]}
+      onOpenWith={(item, option) => console.log("open with:", option.name, item)}
+    />
+  ),
+}
+
+export const EmptyOpenWithMenu: Story = {
+  args: {
+    item: { name: "file.unknown", path: "/tmp/file.unknown" },
+    onOpen: (item) => console.log("open:", item),
+    onRequestOpenWithOptions: () => [],
+    onOpenWith: (item, option) => console.log("open with:", option.name, item),
+  },
+}
+
+export const CustomOpenWithLabel: Story = {
+  args: {
+    item: { name: "document.pdf", path: "/docs/document.pdf" },
+    onOpen: (item) => console.log("open:", item),
+    onRequestOpenWithOptions: () => sampleOpenWithOptions,
+    onOpenWith: (item, option) => console.log("open with:", option.name, item),
+    openWithLabel: "选择应用",
+  },
+}
+
+export const WithIconUrls: Story = {
+  render: () => (
+    <FileReferenceCard
+      item={{ name: "design.sketch", path: "/designs/design.sketch" }}
+      onOpen={(item) => console.log("open:", item)}
+      onRequestOpenWithOptions={() => [
+        {
+          id: "sketch",
+          name: "Sketch",
+          kind: "app",
+          iconUrl: "https://picsum.photos/32/32?random=1",
+        },
+        {
+          id: "figma",
+          name: "Figma",
+          kind: "app",
+          iconUrl: "https://picsum.photos/32/32?random=2",
+        },
+      ]}
+      onOpenWith={(item, option) => console.log("open with:", option.name, item)}
+    />
+  ),
+}
+
+export const RealWorldExample: Story = {
+  render: () => {
+    const [selectedFile, setSelectedFile] = useState<string | null>(null)
+
+    const projectFiles: FileReferenceItem[] = [
+      {
+        id: "readme",
+        name: "README.md",
+        path: "/projects/my-app/README.md",
+        typeLabel: "项目说明",
+      },
+      {
+        id: "package",
+        name: "package.json",
+        path: "/projects/my-app/package.json",
+        typeLabel: "项目配置",
+      },
+      {
+        id: "app",
+        name: "App.tsx",
+        path: "/projects/my-app/src/App.tsx",
+        typeLabel: "主文件",
+      },
+      {
+        id: "docker",
+        name: "Dockerfile",
+        path: "/projects/my-app/Dockerfile",
+        typeLabel: "容器配置",
+      },
+    ]
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <FileReferenceCards
+          items={projectFiles}
+          onOpen={(item) => setSelectedFile(item.path)}
+          onRequestOpenWithOptions={async (item) => {
+            await new Promise((resolve) => setTimeout(resolve, 500))
+            return [
+              { id: "header-1", kind: "header", name: "应用程序" },
+              {
+                id: "vscode",
+                name: "VS Code",
+                kind: "app",
+                isDefault: true,
+                iconName: "Terminal",
+              },
+              {
+                id: "sublime",
+                name: "Sublime Text",
+                kind: "app",
+                iconName: "Edit",
+              },
+              { id: "divider-1", kind: "divider" },
+              { id: "header-2", kind: "header", name: "操作" },
+              {
+                id: "copy",
+                name: "复制路径",
+                kind: "action",
+                iconName: "Copy",
+              },
+              {
+                id: "reveal",
+                name: "在文件夹中显示",
+                kind: "action",
+                iconName: "Folder",
+              },
+            ]
+          }}
+          onOpenWith={(item, option) => {
+            setSelectedFile(`${option.name}: ${item.path}`)
+          }}
+        />
+        {selectedFile && (
+          <div
+            style={{
+              padding: 12,
+              background: "var(--ow-surface)",
+              borderRadius: 8,
+              fontSize: 12,
+              color: "var(--ow-text-2)",
+            }}
+          >
+            已选择: {selectedFile}
+          </div>
+        )}
+      </div>
+    )
+  },
+}

package/src/components/composite/FileReferenceCard/FileReferenceCardSource.test.mjs

@@ -0,0 +1,48 @@
+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")
+
+// 本件在 DS 2.0 已并入 domain/chat/Attachment，只剩薄兼容层。
+// 弹层定位、闲时预取、图标补齐重刷那几条锁断言随实现搬到了
+// domain/chat/Attachment/AttachmentSource.test.mjs，这里只锁「兼容层还是兼容层」。
+
+test("实现已归口 Attachment，本件不再自己画卡", () => {
+  assert.match(source, /from "\.\.\/\.\.\/domain\/chat\/Attachment"/)
+  assert.match(source, /<Attachment\b/)
+  assert.match(source, /<AttachmentList layout="stack"/)
+  assert.doesNotMatch(source, /resolveMenuLayout|getBoundingClientRect|requestIdleCallback/)
+  assert.doesNotMatch(source, /CSSProperties/)
+})
+
+test("类型导出原名原位（Markdown / markdownFileRefs / 预览面 / 桌面端都按这条路径 import）", () => {
+  for (const name of [
+    "FileReferenceTone",
+    "FileReferenceItem",
+    "FileReferenceOpenWithOption",
+    "FileReferenceMenuOption",
+    "FileReferenceCardProps",
+    "FileReferenceCardsProps",
+  ]) {
+    assert.match(source, new RegExp(`export type ${name}\\b`))
+  }
+  assert.match(source, /export const inferFileReferenceMeta = inferAttachmentMeta/)
+})
+
+test("兼容导出全部挂 @deprecated，指向 Attachment", () => {
+  assert.match(source, /@deprecated[\s\S]*?export function FileReferenceCard\(/)
+  assert.match(source, /@deprecated[\s\S]*?export function FileReferenceCards\(/)
+})
+
+test("可点击的卡不重复展示推断类型文案（旧口径保留）", () => {
+  assert.match(source, /const meta = clickable && !item\.typeLabel \? "" : item\.typeLabel/)
+})
+
+test("原生「打开方式」菜单委托仍然接得上（桌面端弹 OS 菜单那条路）", () => {
+  assert.match(source, /onNativeActionsMenu=\{onOpenWithMenu \? \(\) => onOpenWithMenu\(item\) : undefined\}/)
+  assert.match(
+    source,
+    /onRequestActions=\{onRequestOpenWithOptions \? \(\) => onRequestOpenWithOptions\(item\) : undefined\}/,
+  )
+})

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

@@ -0,0 +1,122 @@
+"use client"
+
+import {
+  Attachment,
+  type AttachmentItem,
+  AttachmentList,
+  type AttachmentMenuOption,
+  type AttachmentOpenOption,
+  type AttachmentTone,
+  inferAttachmentMeta,
+} from "../../domain/chat/Attachment"
+
+/* ------------------------------------------------------------------ *
+ * 类型：原名原位保留
+ *
+ * 规范定义已归口 `domain/chat/Attachment`（DS 2.0 蓝图：Attachment 合并
+ * AttachmentCard / Attachments / FileReferenceCard(+s) / ImageCard）。这里保留原名
+ * 别名，是因为 Markdown、markdownFileRefs、FilePreviewContentView、OfficePreview 以及
+ * 桌面端都按这条路径 import 类型 —— 类型不搬家，实现才搬得动。
+ * ------------------------------------------------------------------ */
+
+/** @deprecated 用 `AttachmentTone`（domain/chat/Attachment）。 */
+export type FileReferenceTone = AttachmentTone
+/** @deprecated 用 `AttachmentItem`（domain/chat/Attachment）。 */
+export type FileReferenceItem = AttachmentItem
+/** @deprecated 用 `AttachmentOpenOption`（domain/chat/Attachment）。 */
+export type FileReferenceOpenWithOption = AttachmentOpenOption
+/** @deprecated 用 `AttachmentMenuOption`（domain/chat/Attachment）。 */
+export type FileReferenceMenuOption = AttachmentMenuOption
+/** @deprecated 用 `inferAttachmentMeta`（domain/chat/Attachment）。 */
+export const inferFileReferenceMeta = inferAttachmentMeta
+
+export type FileReferenceCardProps = {
+  item: FileReferenceItem
+  onOpen?: (item: FileReferenceItem) => void
+  onOpenWithMenu?: (item: FileReferenceItem) => void
+  onRequestOpenWithOptions?: (item: FileReferenceItem) => Promise<FileReferenceMenuOption[]> | FileReferenceMenuOption[]
+  onOpenWith?: (item: FileReferenceItem, option: FileReferenceMenuOption) => void
+  className?: string
+  openWithLabel?: string
+}
+
+export type FileReferenceCardsProps = {
+  items: FileReferenceItem[]
+  onOpen?: (item: FileReferenceItem) => void
+  onOpenWithMenu?: (item: FileReferenceItem) => void
+  onRequestOpenWithOptions?: (item: FileReferenceItem) => Promise<FileReferenceMenuOption[]> | FileReferenceMenuOption[]
+  onOpenWith?: (item: FileReferenceItem, option: FileReferenceMenuOption) => void
+  className?: string
+  "aria-label"?: string
+  openWithLabel?: string
+}
+
+/**
+ * 转录里的文件引用卡。
+ *
+ * @deprecated DS 2.0 起并入 `Attachment`（domain/chat/Attachment，`variant="card"`）。
+ * 本导出是薄兼容层，只把 item 拆成 Attachment 的扁平 props；新代码直接用 `Attachment`。
+ */
+export function FileReferenceCard({
+  item,
+  onOpen,
+  onOpenWithMenu,
+  onRequestOpenWithOptions,
+  onOpenWith,
+  className = "",
+  openWithLabel = "打开方式",
+}: FileReferenceCardProps) {
+  // 可点击的卡本身就是打开入口，推断出的类型文案只是重复扩展名，所以不展示；
+  // 调用方显式传的 typeLabel 是业务文案（来源、价格之类），照旧保留。
+  const clickable = Boolean(onOpen)
+  const meta = clickable && !item.typeLabel ? "" : item.typeLabel
+
+  return (
+    <Attachment
+      variant="card"
+      name={item.name}
+      path={item.path}
+      badge={item.badge}
+      meta={meta}
+      className={className}
+      actionsLabel={openWithLabel}
+      onOpen={onOpen ? () => onOpen(item) : undefined}
+      onNativeActionsMenu={onOpenWithMenu ? () => onOpenWithMenu(item) : undefined}
+      onRequestActions={onRequestOpenWithOptions ? () => onRequestOpenWithOptions(item) : undefined}
+      onAction={onOpenWith ? (option) => onOpenWith(item, option) : undefined}
+    />
+  )
+}
+
+/**
+ * 文件引用卡的竖列。
+ *
+ * @deprecated DS 2.0 起并入 `AttachmentList`（`layout="stack"`）＋ `Attachment`。
+ */
+export function FileReferenceCards({
+  items,
+  onOpen,
+  onOpenWithMenu,
+  onRequestOpenWithOptions,
+  onOpenWith,
+  className = "",
+  "aria-label": ariaLabel = "文件引用",
+  openWithLabel,
+}: FileReferenceCardsProps) {
+  if (items.length === 0) return null
+  return (
+    <AttachmentList layout="stack" className={className} aria-label={ariaLabel}>
+      {items.map((item) => (
+        <FileReferenceCard
+          key={item.id ?? item.path}
+          item={item}
+          onOpen={onOpen}
+          onOpenWithMenu={onOpenWithMenu}
+          onRequestOpenWithOptions={onRequestOpenWithOptions}
+          onOpenWith={onOpenWith}
+          openWithLabel={openWithLabel}
+        />
+      ))}
+    </AttachmentList>
+  )
+}

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

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Button } from "../../primitives/Button"
+import { Checkbox } from "../../primitives/Checkbox"
+import { DataTable, type DataTableColumn } from "../DataTable"
+import { FilterBar } from "./index"
+
+const filterDefs = [
+  { key: "all", label: "全部" },
+  { key: "running", label: "运行中" },
+  { key: "done", label: "已完成" },
+  { key: "failed", label: "失败" },
+  { key: "archived", label: "已归档", disabled: true },
+]
+
+const sortOptions = [
+  { label: "最近更新", value: "recent" },
+  { label: "耗时最长", value: "duration" },
+  { label: "消耗最多", value: "cost" },
+]
+
+const meta = {
+  title: "Composite/FilterBar",
+  component: FilterBar,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FilterBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function SubFilter({ label, disabled }: { label: string; disabled?: boolean }) {
+  return (
+    <label className="inline-flex items-center gap-2 text-ow-fs-ui text-[color:var(--ow-text-2)]">
+      <Checkbox disabled={disabled} aria-label={label} />
+      {label}
+    </label>
+  )
+}
+
+function Live(props: Partial<React.ComponentProps<typeof FilterBar>>) {
+  const [active, setActive] = useState("running")
+  const [query, setQuery] = useState("")
+  const [sort, setSort] = useState("recent")
+  return (
+    <FilterBar
+      filters={filterDefs.map((filter) => ({ ...filter, active: filter.key === active }))}
+      onFilterToggle={setActive}
+      search={{ value: query, onChange: setQuery, placeholder: "搜索任务" }}
+      sort={{ value: sort, options: sortOptions, onChange: setSort }}
+      {...props}
+    />
+  )
+}
+
+export const Default: Story = {
+  args: {},
+  render: () => <Live />,
+}
+
+export const FiltersOnly: Story = {
+  name: "只有筛选 Tag（直角 6）",
+  args: {},
+  render: () => {
+    const [active, setActive] = useState("all")
+    return (
+      <FilterBar
+        filters={filterDefs.map((filter) => ({ ...filter, active: filter.key === active }))}
+        onFilterToggle={setActive}
+      />
+    )
+  },
+}
+
+export const SearchOnly: Story = {
+  name: "只有搜索",
+  args: {},
+  render: () => {
+    const [query, setQuery] = useState("")
+    return <FilterBar search={{ value: query, onChange: setQuery, placeholder: "搜索任务" }} />
+  },
+}
+
+export const WithReset: Story = {
+  name: "带清空筛选",
+  args: {},
+  render: () => <Live onReset={() => {}} />,
+}
+
+export const WithActions: Story = {
+  name: "带右侧动作区",
+  args: {},
+  render: () => <Live actions={<Button size="sm">新建任务</Button>} />,
+}
+
+export const Disclosure: Story = {
+  name: "折叠形态（原 FilterDisclosure）",
+  args: {},
+  render: () => (
+    <Live collapsible defaultExpanded>
+      <SubFilter label="只看我发起的" />
+      <SubFilter label="含子任务" />
+      <SubFilter label="含失败重试" disabled />
+    </Live>
+  ),
+}
+
+export const Disabled: Story = {
+  name: "全禁用（逐 token）",
+  args: {},
+  render: () => (
+    <FilterBar
+      filters={filterDefs.map((filter) => ({ ...filter, disabled: true }))}
+      search={{ value: "", onChange: () => {}, placeholder: "搜索任务", disabled: true }}
+      sort={{ value: "recent", options: sortOptions, onChange: () => {}, disabled: true }}
+    />
+  ),
+}
+
+export const FlushInTable: Story = {
+  name: "贴合表格（flush，DataTableToolbar 配方）",
+  args: {},
+  render: () => {
+    const [query, setQuery] = useState("")
+    const rows = [
+      { id: "r-1042", task: "站点回归巡检", cost: 3120 },
+      { id: "r-1043", task: "客户合同抽检", cost: 26900 },
+    ]
+    const columns: DataTableColumn<(typeof rows)[number]>[] = [
+      { key: "id", header: "运行 ID", numeric: true, width: 110 },
+      { key: "task", header: "任务" },
+      { key: "cost", header: "消耗 token", numeric: true, sortable: true, width: 120 },
+    ]
+    return (
+      <DataTable
+        columns={columns}
+        rows={rows}
+        rowKey={(row) => row.id}
+        caption="筛选后的运行记录"
+        toolbar={
+          <FilterBar
+            flush
+            className="border-b border-[color:var(--ow-border)]"
+            filters={filterDefs.slice(0, 3)}
+            search={{ value: query, onChange: setQuery, placeholder: "搜索任务", width: 180 }}
+          />
+        }
+      />
+    )
+  },
+}
+
+/** 双主题对照：同一份 demo 逐字复制，主题由 data-theme 局部驱动。 */
+export const ThemePair: Story = {
+  args: {},
+  name: "双主题对照",
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+      <div data-theme="light" style={{ background: "var(--ow-bg)", padding: 16 }}>
+        <Live />
+      </div>
+      <div data-theme="dark" style={{ background: "var(--ow-bg)", padding: 16 }}>
+        <Live />
+      </div>
+    </div>
+  ),
+}