@ploykit/ui 0.5.0 → 0.6.2

package/src/components/WorkspaceSwitcher.tsx

@@ -0,0 +1,159 @@
+
+import { useState } from 'react'
+import { Link } from 'react-router'
+import { Check, ChevronsUpDown, Plus } from 'lucide-react'
+import { isApiError } from '@ploykit/client'
+import { cn } from '../lib/utils'
+import { apiErrorMessage } from '../lib/api-error'
+import { useWorkspaceSwitch } from '@ploykit/hooks'
+import { toast } from './toast'
+import { Button } from './ui/button'
+import { Input } from './ui/input'
+import {
+  SidebarMenu, SidebarMenuButton, SidebarMenuItem,
+} from './ui/sidebar'
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
+  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
+} from './ui/dropdown-menu'
+
+
+const slugSuffix = (n = 4): string => {
+  const alphabet = 'abcdefghijklmnopqrstuvwxyz0123456789'
+  let out = ''
+  for (let i = 0; i < n; i++) out += alphabet[Math.floor(Math.random() * alphabet.length)]
+  return out
+}
+
+
+const slugify = (s: string): string => {
+  let slug = s
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-+|-+$/g, '')
+  if (slug.length > 40) slug = slug.slice(0, 40).replace(/-+$/g, '')
+  if (slug.length < 4) slug = `${slug || 'ws'}-${slugSuffix()}`
+  return slug
+}
+
+export function WorkspaceSwitcher() {
+  const { current, list, switchTo, create, creating, error } = useWorkspaceSwitch()
+  const [showCreate, setShowCreate] = useState(false)
+  const [name, setName] = useState('')
+  
+  
+  
+  const createError = error === null ? null : apiErrorMessage(error, '创建工作区失败，请稍后重试')
+  const quotaExceeded = isApiError(error, 'E_QUOTA_EXCEEDED') || (isApiError(error) && error.status === 402)
+
+  const handleCreate = async () => {
+    if (!name.trim()) return
+    const ws = await create(name.trim(), slugify(name.trim()))
+    if (ws) {
+      toast.success(`工作区「${ws.name}」已创建`)
+      setName('')
+      setShowCreate(false)
+    }
+  }
+
+  return (
+    <div className="relative">
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={
+                <SidebarMenuButton
+                  size="lg"
+                  className="data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground"
+                />
+              }
+              aria-label="切换工作区"
+            >
+              <span className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sm font-bold text-sidebar-primary-foreground">
+                {current?.name?.[0]?.toUpperCase() ?? '?'}
+              </span>
+              <span className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{current?.name ?? '选择工作区'}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {current?.plan_code ?? '—'}
+                </span>
+              </span>
+              <ChevronsUpDown className="ml-auto size-4 text-muted-foreground" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-(--anchor-width) min-w-56" align="start" side="bottom" sideOffset={4}>
+              <DropdownMenuGroup>
+                <DropdownMenuLabel className="text-xs text-muted-foreground">工作区</DropdownMenuLabel>
+                {list.map((ws) => (
+                  <DropdownMenuItem
+                    key={ws.id}
+                    className="gap-2 p-2"
+                    onClick={() => switchTo(ws.id)}
+                  >
+                    <span className="flex size-6 items-center justify-center rounded-md border bg-transparent text-[10px] font-bold">
+                      {ws.name[0]?.toUpperCase()}
+                    </span>
+                    <span className="flex-1 truncate">{ws.name}</span>
+                    {current?.id === ws.id && <Check className="size-4" />}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className="gap-2 p-2" onClick={() => setShowCreate(true)}>
+                <span className="flex size-6 items-center justify-center rounded-md border bg-transparent">
+                  <Plus className="size-4" />
+                </span>
+                <span className="whitespace-nowrap font-medium text-muted-foreground">新建工作区</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+
+      {showCreate && (
+        <div
+          className={cn(
+            'absolute left-0 top-full z-50 mt-2 w-64 rounded-lg border bg-popover p-2 shadow-lg',
+          )}
+        >
+          <Input
+            autoFocus
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !creating) handleCreate()
+            }}
+            placeholder="工作区名称"
+            aria-label="新工作区名称"
+            maxLength={64} 
+          />
+          <div className="mt-2 flex gap-1">
+            <Button size="sm" className="flex-1" onClick={handleCreate} disabled={!name.trim() || creating}>
+              {creating ? '创建中…' : '创建'}
+            </Button>
+            <Button size="sm" variant="outline" className="flex-1" onClick={() => setShowCreate(false)}>
+              取消
+            </Button>
+          </div>
+          {createError && (
+            <div className="mt-2 space-y-1">
+              <p role="alert" className="text-xs text-destructive">{createError}</p>
+              {quotaExceeded && (
+                
+                <p className="text-xs text-muted-foreground">
+                  已达当前工作区数上限，可在
+                  <Link to="/settings/workspace/billing" className="mx-1 text-primary underline-offset-2 hover:underline">
+                    设置→计费
+                  </Link>
+                  查看套餐与配额
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/__tests__/AppProviders.test.tsx

@@ -0,0 +1,111 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { AppProviders } from '../../AppProviders'
+import { ConfirmProvider, useConfirm } from '../ConfirmDialog'
+
+describe('useConfirm fail-fast（无 Provider 时必须抛错，不许静默返回 false）', () => {
+  it('组件树里没有 ConfirmProvider 时，useConfirm 抛出对齐 hooks 包风格的错误', () => {
+    function Probe() {
+      useConfirm()
+      return null
+    }
+    // 屏蔽 React 未捕获错误的噪音输出，只关心抛错本身
+    const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() => render(<Probe />)).toThrow('useConfirm must be used within ConfirmProvider')
+    errSpy.mockRestore()
+  })
+})
+
+describe('ConfirmProvider 内 useConfirm 的确认/取消契约', () => {
+  it('探针组件调用 confirm，点击确认后 resolve(true)', async () => {
+    const resolved = vi.fn()
+    function Probe() {
+      const confirm = useConfirm()
+      return (
+        <button
+          onClick={() => {
+            confirm({ title: '重置 API Key', description: '旧 Key 立即失效' }).then(resolved)
+          }}
+        >
+          发起确认
+        </button>
+      )
+    }
+    render(
+      <ConfirmProvider>
+        <Probe />
+      </ConfirmProvider>,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: '发起确认' }))
+    expect(await screen.findByText('重置 API Key')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: '确认' }))
+    await waitFor(() => expect(resolved).toHaveBeenCalledWith(true))
+  })
+
+  it('点击取消时 resolve(false)', async () => {
+    const resolved = vi.fn()
+    function Probe() {
+      const confirm = useConfirm()
+      return (
+        <button
+          onClick={() => {
+            confirm({ title: '危险操作' }).then(resolved)
+          }}
+        >
+          发起确认
+        </button>
+      )
+    }
+    render(
+      <ConfirmProvider>
+        <Probe />
+      </ConfirmProvider>,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: '发起确认' }))
+    expect(await screen.findByText('危险操作')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: '取消' }))
+    await waitFor(() => expect(resolved).toHaveBeenCalledWith(false))
+  })
+})
+
+describe('AppProviders（PloykitProvider > ConfirmProvider > Toaster 一步到位）', () => {
+  it('组合件内 useConfirm 可用：探针 confirm 后点击确认 resolve(true)', async () => {
+    const resolved = vi.fn()
+    function Probe() {
+      const confirm = useConfirm()
+      return (
+        <button
+          onClick={() => {
+            confirm({ title: '删除工作区', danger: true }).then(resolved)
+          }}
+        >
+          发起确认
+        </button>
+      )
+    }
+    // AppProviders 内部的 PloykitProvider 会在挂载时请求 /auth/me 与 /api/workspaces，
+    // jsdom 环境无后端：stub fetch 返回 401，让 auth 层按未登录降级（这正是产品首屏路径）。
+    const fetchSpy = vi
+      .spyOn(globalThis, 'fetch')
+      .mockImplementation(() => Promise.resolve(new Response(JSON.stringify({ error: 'unauthorized' }), { status: 401 })))
+
+    render(
+      <AppProviders>
+        <Probe />
+      </AppProviders>,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: '发起确认' }))
+    expect(await screen.findByText('删除工作区')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: '确认' }))
+    await waitFor(() => expect(resolved).toHaveBeenCalledWith(true))
+
+    fetchSpy.mockRestore()
+  })
+})

package/src/components/__tests__/CronInput.test.tsx

@@ -0,0 +1,180 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useState } from 'react'
+import { CronInput, describeCron, timezoneOptions, type CronValue } from '../CronInput'
+
+
+
+
+
+const mockedPost = vi.hoisted(() => vi.fn())
+vi.mock('@ploykit/client', () => {
+  class ApiError extends Error {
+    status: number
+    code?: string
+    constructor(status: number, code: string | undefined, message: string) {
+      super(message)
+      this.status = status
+      this.code = code
+    }
+  }
+  return {
+    api: { post: mockedPost },
+    ApiError,
+    setWorkspaceIdProvider: vi.fn(),
+  }
+})
+
+
+function Harness({ initial }: { initial: CronValue }) {
+  const [v, setV] = useState(initial)
+  return <CronInput value={v} onChange={setV} />
+}
+
+function renderInput(initial: CronValue = { cron: '', timezone: 'UTC' }) {
+  return render(<Harness initial={initial} />)
+}
+
+beforeEach(() => {
+  mockedPost.mockReset()
+})
+
+describe('CronInput（批次 11 前端件：预览走后端 cronx 单一事实源）', () => {
+  it('空表达式：提示五字段格式，预览按钮禁用', () => {
+    renderInput()
+    expect(screen.getByTestId('cron-hint')).toHaveTextContent('五字段：分 时 日 月 周')
+    expect(screen.getByRole('button', { name: /预览下次 3 次/ })).toBeDisabled()
+  })
+
+  it('输入校验（人类可读描述）：常见档位映射中文短语', () => {
+    renderInput()
+    const input = screen.getByLabelText('Cron 表达式')
+    fireEvent.change(input, { target: { value: '0 9 * * *' } })
+    expect(screen.getByTestId('cron-hint')).toHaveTextContent('每天 09:00')
+
+    fireEvent.change(input, { target: { value: '15 * * * *' } })
+    expect(screen.getByTestId('cron-hint')).toHaveTextContent('每小时（第 15 分）')
+  })
+
+  it('describeCron 纯函数：每分钟/每周/复杂表达式原样显示', () => {
+    expect(describeCron('* * * * *')).toBe('每分钟')
+    expect(describeCron('30 8 * * 1')).toBe('每周一 08:30')
+    expect(describeCron('0 9 1 * *')).toBe('0 9 1 * *') 
+    expect(describeCron('not cron')).toBe('not cron')
+  })
+
+  it('时区下拉：内置常用列表兜底可用，切换更新所选时区', () => {
+    const zones = timezoneOptions()
+    expect(zones.length).toBeGreaterThan(0)
+    expect(zones).toContain('UTC')
+    expect(zones).toContain('Asia/Shanghai')
+
+    renderInput()
+    const select = screen.getByLabelText('时区')
+    expect((select as HTMLSelectElement).value).toBe('UTC')
+    fireEvent.change(select, { target: { value: 'Asia/Shanghai' } })
+    expect((select as HTMLSelectElement).value).toBe('Asia/Shanghai')
+  })
+
+  it('预览：POST /api/schedules/preview {cron_expr, timezone, count} 并渲染 3 项', async () => {
+    mockedPost.mockResolvedValue({
+      items: ['2026-10-07T01:00:00Z', '2026-10-08T01:00:00Z', '2026-10-09T01:00:00Z'],
+    })
+    renderInput({ cron: '0 9 * * *', timezone: 'Asia/Shanghai' })
+
+    fireEvent.click(screen.getByRole('button', { name: /预览下次 3 次/ }))
+    await waitFor(() =>
+      expect(mockedPost).toHaveBeenCalledWith('/api/schedules/preview', {
+        cron_expr: '0 9 * * *',
+        timezone: 'Asia/Shanghai',
+        count: 3,
+      }),
+    )
+
+    const items = await screen.findAllByRole('listitem', {}, { container: screen.getByTestId('cron-preview') })
+    expect(items).toHaveLength(3)
+    
+    expect(items[0].textContent).toContain('09:00')
+    expect(items[0].textContent).toContain('2026')
+  })
+
+  it('预览失败：展示可读错误（服务端 E_INVALID_CRON 等透传）', async () => {
+    mockedPost.mockRejectedValue(new Error('invalid cron expression'))
+    renderInput({ cron: 'bad', timezone: 'UTC' })
+
+    fireEvent.click(screen.getByRole('button', { name: /预览下次 3 次/ }))
+    const alert = await screen.findByRole('alert')
+    expect(alert).toHaveTextContent('invalid cron expression')
+    expect(screen.queryByTestId('cron-preview')).not.toBeInTheDocument()
+  })
+
+  it('disabled：表达式输入、时区下拉与预览按钮全部禁用', () => {
+    render(
+      <CronInput
+        value={{ cron: '0 9 * * *', timezone: 'UTC' }}
+        onChange={() => {}}
+        disabled
+      />,
+    )
+    expect(screen.getByLabelText('Cron 表达式')).toBeDisabled()
+    expect(screen.getByLabelText('时区')).toBeDisabled()
+    expect(screen.getByRole('button', { name: /预览/ })).toBeDisabled()
+  })
+})
+
+describe('B5：describeCron 周几中文与越界回退', () => {
+  it('每周档位输出中文周几（0/7 均为周日）', () => {
+    expect(describeCron('30 8 * * 1')).toBe('每周一 08:30')
+    expect(describeCron('0 9 * * 5')).toBe('每周五 09:00')
+    expect(describeCron('0 9 * * 0')).toBe('每周日 09:00')
+    expect(describeCron('0 9 * * 7')).toBe('每周日 09:00')
+  })
+
+  it('数值域越界/非整数回退原表达式，不再伪翻译"每天 99:99"', () => {
+    expect(describeCron('99 99 * * *')).toBe('99 99 * * *') 
+    expect(describeCron('0 25 * * *')).toBe('0 25 * * *') 
+    expect(describeCron('61 * * * *')).toBe('61 * * * *') 
+    expect(describeCron('0 9 * * 8')).toBe('0 9 * * 8') 
+    expect(describeCron('abc 9 * * *')).toBe('abc 9 * * *') 
+  })
+
+  it('合法档位翻译不受影响（每分钟/每小时/每天）', () => {
+    expect(describeCron('* * * * *')).toBe('每分钟')
+    expect(describeCron('15 * * * *')).toBe('每小时（第 15 分）')
+    expect(describeCron('0 9 * * *')).toBe('每天 09:00')
+  })
+})
+
+describe('P3-8：过期响应守卫与输入变化失效', () => {
+  it('在途响应晚归被丢弃：预览中改时区后，旧请求结果不再上屏', async () => {
+    let resolveFirst!: (v: { items: string[] }) => void
+    mockedPost.mockImplementationOnce(() =>
+      new Promise((res) => {
+        resolveFirst = res as typeof resolveFirst
+      }),
+    )
+    renderInput({ cron: '0 9 * * *', timezone: 'UTC' })
+    fireEvent.click(screen.getByRole('button', { name: /预览下次/ }))
+
+    
+    
+    fireEvent.change(screen.getByLabelText('时区'), { target: { value: 'Asia/Shanghai' } })
+    resolveFirst({ items: ['2026-10-09T09:00:00Z'] })
+    await Promise.resolve()
+    expect(screen.queryByTestId('cron-preview')).not.toBeInTheDocument()
+    
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: /预览下次/ })).toBeEnabled())
+  })
+
+  it('预览在途/完成后修改时区：旧列表立即失效（不被误读为当前时区的语义）', async () => {
+    mockedPost.mockResolvedValue({ items: ['2026-10-09T09:00:00Z'] })
+    renderInput({ cron: '0 9 * * *', timezone: 'UTC' })
+    fireEvent.click(screen.getByRole('button', { name: /预览下次/ }))
+    expect(await screen.findByTestId('cron-preview')).toBeInTheDocument()
+
+    fireEvent.change(screen.getByLabelText('时区'), { target: { value: 'Asia/Shanghai' } })
+    expect(screen.queryByTestId('cron-preview')).not.toBeInTheDocument()
+  })
+})

package/src/components/__tests__/DataTable.test.tsx

@@ -0,0 +1,208 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataTable, type Column } from '../DataTable'
+
+interface Row { id: string; name: string; score: number }
+
+const columns: Column<Row>[] = [
+  { key: 'name', header: '名称' },
+  { key: 'score', header: '分数', render: (r) => <span>{r.score} 分</span> },
+]
+const rows: Row[] = [
+  { id: 'a', name: '甲', score: 1 },
+  { id: 'b', name: '乙', score: 2 },
+  { id: 'c', name: '丙', score: 3 },
+]
+
+describe('DataTable', () => {
+  it('3 行 2 列渲染表头与单元格文案', () => {
+    render(<DataTable columns={columns} rows={rows} rowKey={(r) => r.id} />)
+    expect(screen.getByText('名称')).toBeInTheDocument()
+    expect(screen.getByText('分数')).toBeInTheDocument()
+    for (const name of ['甲', '乙', '丙']) {
+      expect(screen.getByText(name)).toBeInTheDocument()
+    }
+    expect(screen.getByText('2 分')).toBeInTheDocument() 
+    expect(document.querySelectorAll('tbody tr')).toHaveLength(3)
+  })
+
+  it('loading 时渲染列数个 Skeleton 且表头保留', () => {
+    render(<DataTable columns={columns} rows={[]} rowKey={(r) => r.id} loading />)
+    expect(document.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(2)
+    expect(screen.getByText('名称')).toBeInTheDocument()
+  })
+
+  it('空 rows 显示传入的 empty 文案', () => {
+    render(<DataTable columns={columns} rows={[]} rowKey={(r) => r.id} empty={<div>这里空空如也</div>} />)
+    expect(screen.getByText('这里空空如也')).toBeInTheDocument()
+  })
+
+  it('空 rows 且无 empty 时回退 PageEmpty 默认占位', () => {
+    render(<DataTable columns={columns} rows={[]} rowKey={(r) => r.id} />)
+    expect(screen.getByText('暂无数据')).toBeInTheDocument()
+  })
+
+  it('传入 pagination 渲染底栏文案，且边界页禁用对应按钮', () => {
+    const onPageChange = vi.fn()
+    render(
+      <DataTable
+        columns={columns}
+        rows={rows}
+        rowKey={(r) => r.id}
+        pagination={{ page: 2, pageSize: 20, total: 42, onPageChange }}
+      />,
+    )
+    
+    expect(screen.getByText('42')).toBeInTheDocument()
+    expect(screen.getByText('2/3')).toBeInTheDocument()
+    const prev = screen.getByRole('button', { name: '上一页' })
+    const next = screen.getByRole('button', { name: '下一页' })
+    expect(prev).toBeEnabled()
+    expect(next).toBeEnabled()
+    fireEvent.click(next)
+    expect(onPageChange).toHaveBeenCalledWith(3)
+    fireEvent.click(prev)
+    expect(onPageChange).toHaveBeenCalledWith(1)
+  })
+
+  it('pagination 首页禁用上一页、末页禁用下一页', () => {
+    const first = render(
+      <DataTable
+        columns={columns}
+        rows={rows}
+        rowKey={(r) => r.id}
+        pagination={{ page: 1, pageSize: 20, total: 42, onPageChange: () => {} }}
+      />,
+    )
+    expect(screen.getByRole('button', { name: '上一页' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: '下一页' })).toBeEnabled()
+    expect(screen.getByText('1/3')).toBeInTheDocument()
+    first.unmount()
+
+    render(
+      <DataTable
+        columns={columns}
+        rows={rows}
+        rowKey={(r) => r.id}
+        pagination={{ page: 3, pageSize: 20, total: 42, onPageChange: () => {} }}
+      />,
+    )
+    expect(screen.getByRole('button', { name: '上一页' })).toBeEnabled()
+    expect(screen.getByRole('button', { name: '下一页' })).toBeDisabled()
+    expect(screen.getByText('3/3')).toBeInTheDocument()
+  })
+
+  it('空 rows 时不渲染分页底栏（空态行为不受 pagination 影响）', () => {
+    render(
+      <DataTable
+        columns={columns}
+        rows={[]}
+        rowKey={(r) => r.id}
+        pagination={{ page: 1, pageSize: 20, total: 0, onPageChange: () => {} }}
+      />,
+    )
+    expect(screen.getByText('暂无数据')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: '下一页' })).not.toBeInTheDocument()
+  })
+
+  it('P3-10：stale page（有 total 的空页）不整表换空态——空表体+分页栏，保住"上一页"出口', () => {
+
+
+    render(
+      <DataTable
+        columns={columns}
+        rows={[]}
+        rowKey={(r) => r.id}
+        pagination={{ page: 5, pageSize: 20, total: 42, onPageChange: () => {} }}
+      />,
+    )
+    expect(screen.queryByText('暂无数据')).not.toBeInTheDocument()
+    expect(screen.getByText('本页没有数据，可返回上一页')).toBeInTheDocument()
+
+    expect(screen.getByRole('button', { name: '上一页' })).toBeEnabled()
+    expect(screen.getByRole('button', { name: '下一页' })).toBeDisabled()
+  })
+
+  it('rowKey 回调收到行下标（第二参数），可用于同 code 多行的唯一 key', () => {
+    const seen: Array<[string, number]> = []
+    render(
+      <DataTable
+        columns={columns}
+        rows={rows}
+        rowKey={(r, index) => {
+          seen.push([r.id, index])
+          return `${r.id}-${index}`
+        }}
+      />,
+    )
+    expect(seen).toEqual([
+      ['a', 0],
+      ['b', 1],
+      ['c', 2],
+    ])
+    expect(document.querySelectorAll('tbody tr')).toHaveLength(3)
+  })
+
+  it('onRowClick：点击行触发回调并携带行数据，行带 cursor-pointer', () => {
+    const onRowClick = vi.fn()
+    render(<DataTable columns={columns} rows={rows} rowKey={(r) => r.id} onRowClick={onRowClick} />)
+    const firstRow = document.querySelector('tbody tr') as HTMLTableRowElement
+    expect(firstRow.className).toContain('cursor-pointer')
+    fireEvent.click(firstRow)
+    expect(onRowClick).toHaveBeenCalledTimes(1)
+    expect(onRowClick).toHaveBeenCalledWith(rows[0])
+  })
+
+  it('未传 onRowClick 的行无 cursor-pointer 也不响应点击', () => {
+    const onRowClick = vi.fn()
+    render(<DataTable columns={columns} rows={rows} rowKey={(r) => r.id} />)
+    const firstRow = document.querySelector('tbody tr') as HTMLTableRowElement
+    expect(firstRow.className).not.toContain('cursor-pointer')
+    fireEvent.click(firstRow)
+    expect(onRowClick).not.toHaveBeenCalled()
+  })
+
+  it('renderExpanded：返回非 null 时在行后插入 colSpan 展开行；返回 null 时不插入', () => {
+    const { rerender } = render(
+      <DataTable
+        columns={columns}
+        rows={rows}
+        rowKey={(r) => r.id}
+        renderExpanded={(r) => (r.id === 'b' ? <div>详情：{r.name}</div> : null)}
+      />,
+    )
+    // 3 行数据 + 仅乙行有展开行 = 4 个 tr
+    const allRows = document.querySelectorAll('tbody tr')
+    expect(allRows).toHaveLength(4)
+    const expandedRow = document.querySelector('[data-slot="data-table-expanded-row"]') as HTMLTableRowElement
+    expect(expandedRow).not.toBeNull()
+    const expandedTd = expandedRow.querySelector('td') as HTMLTableCellElement
+    expect(expandedTd).toHaveAttribute('colspan', '2')
+    expect(screen.getByText('详情：乙')).toBeInTheDocument()
+    // 展开行不应出现在普通数据行里重复渲染
+    expect(allRows[1].querySelector('td')).not.toHaveAttribute('colspan')
+
+    rerender(
+      <DataTable columns={columns} rows={rows} rowKey={(r) => r.id} renderExpanded={() => null} />,
+    )
+    expect(document.querySelectorAll('tbody tr')).toHaveLength(3)
+    expect(document.querySelector('[data-slot="data-table-expanded-row"]')).toBeNull()
+  })
+
+  it('renderExpanded 收到行下标（第二参数）', () => {
+    const seenIndexes: number[] = []
+    render(
+      <DataTable
+        columns={columns}
+        rows={rows}
+        rowKey={(r) => r.id}
+        renderExpanded={(_r, index) => {
+          seenIndexes.push(index)
+          return null
+        }}
+      />,
+    )
+    expect(seenIndexes).toEqual([0, 1, 2])
+  })
+})