@ploykit/ui 0.5.0 → 0.6.2

package/src/components/CronInput.tsx

@@ -0,0 +1,195 @@
+
+import { useEffect, useRef, useState } from 'react'
+import { api } from '@ploykit/client'
+import { apiErrorMessage } from '../lib/api-error'
+import { Button } from './ui/button'
+import { Input } from './ui/input'
+
+export interface CronValue {
+  cron: string
+  timezone: string
+}
+
+export interface CronInputProps {
+  value: CronValue
+  onChange: (v: CronValue) => void
+  
+  idPrefix?: string
+  
+  previewCount?: number
+  disabled?: boolean
+}
+
+
+export const FALLBACK_TIMEZONES = [
+  'UTC',
+  'Asia/Shanghai',
+  'Asia/Hong_Kong',
+  'Asia/Singapore',
+  'Asia/Tokyo',
+  'Europe/London',
+  'Europe/Berlin',
+  'Europe/Paris',
+  'America/New_York',
+  'America/Chicago',
+  'America/Los_Angeles',
+  'Australia/Sydney',
+]
+
+
+export function timezoneOptions(): string[] {
+  let zones: string[] = []
+  try {
+    const i = Intl as { supportedValuesOf?: (key: string) => string[] }
+    if (typeof i.supportedValuesOf === 'function') {
+      zones = i.supportedValuesOf('timeZone')
+    }
+  } catch {
+    // fall through 到内置列表
+  }
+  if (zones.length === 0) return FALLBACK_TIMEZONES
+  return Array.from(new Set(['UTC', ...zones]))
+}
+
+
+const DOW_LABEL: Record<string, string> = {
+  '0': '周日', '1': '周一', '2': '周二', '3': '周三', '4': '周四', '5': '周五', '6': '周六', '7': '周日',
+}
+
+
+export function describeCron(expr: string): string {
+  const fields = expr.trim().split(/\s+/)
+  if (fields.length !== 5) return expr
+  const [min, hour, dom, mon, dow] = fields
+  if (mon !== '*') return expr
+  const intIn = (s: string, lo: number, hi: number) => /^\d+$/.test(s) && Number(s) >= lo && Number(s) <= hi
+  if (min !== '*' && !intIn(min, 0, 59)) return expr
+  if (hour !== '*' && !intIn(hour, 0, 23)) return expr
+  if (dow !== '*' && !intIn(dow, 0, 7)) return expr
+  const hhmm = `${hour.padStart(2, '0')}:${min.padStart(2, '0')}`
+  if (min === '*' && hour === '*' && dom === '*' && dow === '*') return '每分钟'
+  if (hour === '*' && dom === '*' && dow === '*') return `每小时（第 ${min.padStart(2, '0')} 分）`
+  if (dom === '*' && dow === '*') return `每天 ${hhmm}`
+  if (dom === '*' && hour !== '*' && min !== '*') return `每${DOW_LABEL[dow] ?? dow} ${hhmm}`
+  return expr 
+}
+
+
+function formatPreviewTime(iso: string, tz: string): string {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return iso
+  try {
+    return new Intl.DateTimeFormat('zh-CN', {
+      timeZone: tz, dateStyle: 'medium', timeStyle: 'short',
+    }).format(d)
+  } catch {
+    return d.toISOString()
+  }
+}
+
+export function CronInput({
+  value,
+  onChange,
+  idPrefix = 'cron',
+  previewCount = 3,
+  disabled,
+}: CronInputProps) {
+  const [preview, setPreview] = useState<string[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  
+  const valueRef = useRef(value)
+  valueRef.current = value
+
+  
+  
+  useEffect(() => {
+    setPreview(null)
+  }, [value.cron, value.timezone])
+
+  const runPreview = async () => {
+    const reqCron = value.cron.trim()
+    const reqTz = value.timezone
+    setLoading(true)
+    setError(null)
+    setPreview(null)
+    const stillCurrent = () =>
+      valueRef.current.cron.trim() === reqCron && valueRef.current.timezone === reqTz
+    try {
+      const d = await api.post<{ items: string[] }>('/api/schedules/preview', {
+        cron_expr: reqCron,
+        timezone: reqTz,
+        count: previewCount,
+      })
+      
+      if (stillCurrent()) setPreview(d?.items ?? [])
+    } catch (e) {
+      if (stillCurrent()) setError(apiErrorMessage(e, '预览失败，请检查表达式后重试'))
+    } finally {
+      
+      setLoading(false)
+    }
+  }
+
+  const zones = timezoneOptions()
+
+  return (
+    <div className="space-y-2">
+      <div className="flex gap-2">
+        <div className="min-w-0 flex-1 space-y-1">
+          <label htmlFor={`${idPrefix}-expr`} className="text-sm font-medium">
+            Cron 表达式
+          </label>
+          <Input
+            id={`${idPrefix}-expr`}
+            placeholder="0 9 * * *"
+            className="font-mono"
+            value={value.cron}
+            disabled={disabled}
+            onChange={(e) => onChange({ ...value, cron: e.target.value })}
+          />
+          <p className="text-xs text-muted-foreground" data-testid="cron-hint">
+            {value.cron.trim() ? describeCron(value.cron) : '五字段：分 时 日 月 周'}
+          </p>
+        </div>
+        <div className="w-48 shrink-0 space-y-1">
+          <label htmlFor={`${idPrefix}-tz`} className="text-sm font-medium">
+            时区
+          </label>
+          <select
+            id={`${idPrefix}-tz`}
+            className="h-9 w-full rounded-md border border-input bg-transparent px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+            value={value.timezone}
+            disabled={disabled}
+            onChange={(e) => onChange({ ...value, timezone: e.target.value })}
+          >
+            {zones.map((tz) => (
+              <option key={tz} value={tz}>{tz}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          disabled={disabled || loading || !value.cron.trim()}
+          onClick={() => void runPreview()}
+        >
+          {loading ? '预览中…' : `预览下次 ${previewCount} 次`}
+        </Button>
+        {error && (
+          <p role="alert" className="text-xs text-destructive">{error}</p>
+        )}
+        {preview && preview.length > 0 && (
+          <ul data-testid="cron-preview" className="list-inside list-disc text-xs text-muted-foreground">
+            {preview.map((t, i) => (
+              <li key={i}>{formatPreviewTime(t, value.timezone)}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/DataTable.tsx

@@ -0,0 +1,152 @@
+
+import { Fragment, type ReactNode } from 'react'
+import { cn } from '../lib/utils'
+import { PageEmpty } from './Page'
+import { Skeleton } from './ui/skeleton'
+import { Button } from './ui/button'
+
+export interface Column<T> {
+  key: string
+  header: ReactNode
+  render?: (row: T) => ReactNode
+  className?: string
+}
+
+
+export interface DataTablePagination {
+  page: number
+  pageSize: number
+  total: number
+  onPageChange: (page: number) => void
+}
+
+export interface DataTableProps<T> {
+  columns: Column<T>[]
+  rows: T[]
+  /** 行 key 生成器。第二参数是该行在 rows 中的下标，用于同业务键多行（如同 code 多版本）时拼出唯一 key。少参回调仍然兼容。 */
+  rowKey: (row: T, index: number) => string
+  loading?: boolean
+  empty?: ReactNode
+  /** 整行点击回调。传入后行 hover 显示 pointer 光标。 */
+  onRowClick?: (row: T) => void
+  /**
+   * 展开行扩展点：对每行调用，返回非 null 时在该行下方插入一个展开行
+   * （单个 td，colSpan 覆盖全部列）。展开/收起状态由调用方用行数据自行表达
+   * （收起的行返回 null 即不渲染）——本组件不持有内部展开状态。
+   */
+  renderExpanded?: (row: T, index: number) => ReactNode
+
+  pagination?: DataTablePagination
+}
+
+export function DataTable<T>({ columns, rows, rowKey, loading = false, empty, onRowClick, renderExpanded, pagination }: DataTableProps<T>) {
+  
+  
+  
+  const stalePage =
+    !!pagination && !loading && rows.length === 0 && (pagination.total > 0 || pagination.page > 1)
+  if (!loading && rows.length === 0 && !stalePage) {
+    return <>{empty ?? <PageEmpty />}</>
+  }
+  const lastPage = pagination ? Math.max(1, Math.ceil(pagination.total / Math.max(1, pagination.pageSize))) : 1
+  return (
+    
+    <div className="bg-card rounded-lg border overflow-hidden">
+      {/* X1（admin-ui 卷）：容器只保圆角裁切，表格本体放内层横向滚动层——
+          窄视口或长内容（超长名/事件码）下，overflow-hidden 直接把右侧列
+          （多为操作列）裁成不可达且无滚动出口（users/workspaces/orders/
+          webhook-deliveries/sso/overview 六页 S1 共同根因）。 */}
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b bg-muted/50 text-left text-muted-foreground">
+              {columns.map((col) => (
+                <th key={col.key} className={cn('px-4 py-3 font-medium whitespace-nowrap', col.className)}>{col.header}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr className="border-b last:border-0">
+                {columns.map((col) => (
+                  <td key={col.key} className={cn('px-4 py-3', col.className)}>
+                    <Skeleton className="h-4 w-full" />
+                  </td>
+                ))}
+              </tr>
+            ) : stalePage ? (
+              <tr>
+                <td colSpan={columns.length} className="px-4 py-8 text-center text-sm text-muted-foreground">
+                  本页没有数据，可返回上一页
+                </td>
+              </tr>
+            ) : (
+              rows.map((row, index) => {
+                const expanded = renderExpanded ? renderExpanded(row, index) : null
+                return (
+                  <Fragment key={rowKey(row, index)}>
+                    <tr
+                      className={cn('border-b last:border-0 hover:bg-muted/30', onRowClick && 'cursor-pointer')}
+                      onClick={onRowClick ? () => onRowClick(row) : undefined}
+                    >
+                      {columns.map((col) => (
+                        <td key={col.key} className={cn('px-4 py-3', col.className)}>
+                          {col.render ? col.render(row) : String((row as Record<string, unknown>)[col.key] ?? '')}
+                        </td>
+                      ))}
+                    </tr>
+                    {expanded !== null && (
+                      <tr className="border-b last:border-0" data-slot="data-table-expanded-row">
+                        <td colSpan={columns.length} className="px-4 py-3">
+                          {expanded}
+                        </td>
+                      </tr>
+                    )}
+                  </Fragment>
+                )
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+      {pagination && (
+        <div
+          data-slot="data-table-pagination"
+          aria-busy={loading || undefined}
+          className="flex items-center justify-between border-t px-4 py-3 text-sm text-muted-foreground"
+        >
+          {/* B-users-8：加载中不显示"共 0 条 · 第 1/1 页"假总数——置灰为加载文案 */}
+          {loading ? (
+            <span>加载中…</span>
+          ) : (
+            <span>
+              共 <span className="font-medium text-foreground">{pagination.total}</span> 条 · 第{' '}
+              <span className="font-medium text-foreground">
+                {pagination.page}/{lastPage}
+              </span>{' '}
+              页
+            </span>
+          )}
+          <div className="flex gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={loading || pagination.page <= 1}
+              onClick={() => pagination.onPageChange(pagination.page - 1)}
+            >
+              上一页
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={loading || pagination.page >= lastPage}
+              onClick={() => pagination.onPageChange(pagination.page + 1)}
+            >
+              下一页
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,46 @@
+
+import { Component, type ReactNode } from 'react'
+
+export interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode)
+}
+
+interface ErrorBoundaryState {
+  error: Error | null
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { error: null }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error }
+  }
+
+  componentDidCatch(error: Error): void {
+    console.error('[ErrorBoundary] 子树渲染出错:', error)
+  }
+
+  reset = (): void => {
+    this.setState({ error: null })
+  }
+
+  render(): ReactNode {
+    const { error } = this.state
+    if (error === null) return this.props.children
+    const { fallback } = this.props
+    if (fallback !== undefined) {
+      return typeof fallback === 'function' ? fallback(error, this.reset) : fallback
+    }
+    return (
+      <div role="alert" className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="text-4xl mb-3">⚠️</div>
+        <p className="text-sm text-destructive">出错了</p>
+        {error.message && <p className="mt-1 text-xs text-muted-foreground">{error.message}</p>}
+        <button onClick={this.reset} className="mt-4 px-4 py-2 text-sm border rounded-md hover:bg-muted">
+          重试
+        </button>
+      </div>
+    )
+  }
+}

package/src/components/FormField.tsx

@@ -0,0 +1,56 @@
+
+import { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react'
+import { Field, FieldLabel, FieldError, FieldDescription } from './ui/field'
+
+export interface FormFieldProps {
+  label: string
+  error?: string
+  
+  description?: string
+  
+  required?: boolean
+  children: ReactNode
+  htmlFor?: string
+}
+
+
+function mergeDescribedBy(props: Record<string, unknown>, extra: string) {
+  const existing = typeof props['aria-describedby'] === 'string' ? props['aria-describedby'] : ''
+  return { 'aria-describedby': [existing, extra].filter(Boolean).join(' ') }
+}
+
+export function FormField({ label, error, description, required, children, htmlFor }: FormFieldProps) {
+  const errorId = htmlFor && error ? `${htmlFor}-error` : undefined
+  const descId = htmlFor && description ? `${htmlFor}-desc` : undefined
+  const describedBy = [descId, errorId].filter(Boolean).join(' ') || undefined
+
+  const control =
+    describedBy || error || required
+      ? isValidElement(children)
+        ? cloneElement(
+            children as ReactElement<Record<string, unknown>>,
+            {
+              ...(describedBy ? mergeDescribedBy((children as ReactElement<Record<string, unknown>>).props, describedBy) : {}),
+              ...(error ? { 'aria-invalid': true } : {}),
+              ...(required ? { 'aria-required': true } : {}),
+            },
+          )
+        : children
+      : children
+
+  return (
+    <Field data-invalid={!!error}>
+      <FieldLabel htmlFor={htmlFor}>
+        {label}
+        {required && (
+          <span aria-hidden="true" className="ml-0.5 text-destructive">
+            *
+          </span>
+        )}
+      </FieldLabel>
+      {control}
+      {description && <FieldDescription id={descId}>{description}</FieldDescription>}
+      <FieldError id={errorId}>{error}</FieldError>
+    </Field>
+  )
+}

package/src/components/ImpersonationBanner.tsx

@@ -0,0 +1,23 @@
+
+import { TriangleAlert } from 'lucide-react'
+import { useAuth } from '@ploykit/hooks'
+import { cn } from '../lib/utils'
+
+export function ImpersonationBanner({ className }: { className?: string }) {
+  const { user } = useAuth()
+  if (!user?.impersonated_by) return null
+  return (
+    <div
+      role="status"
+      data-slot="impersonation-banner"
+      className={cn(
+        'flex w-full items-center justify-center gap-2 border-b px-4 py-2 text-sm font-medium',
+        'border-destructive/30 bg-destructive/10 text-destructive',
+        className,
+      )}
+    >
+      <TriangleAlert className="size-4 shrink-0" aria-hidden="true" />
+      <span>您正处于管理员模拟会话</span>
+    </div>
+  )
+}

package/src/components/NotificationBell.tsx

@@ -0,0 +1,135 @@
+
+import { useEffect, useRef, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { api, type APINotification, type components } from '@ploykit/client'
+import { queryKeys } from '@ploykit/hooks'
+import { cn, formatDateTime } from '../lib/utils'
+
+
+type Notification = APINotification
+
+export function NotificationBell({ onNavigate }: { onNavigate?: (link: string) => void }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const qc = useQueryClient()
+
+  
+  const badgeQ = useQuery({
+    queryKey: [queryKeys.notifications, 'badge'],
+    queryFn: () => api.get<components['schemas']['BadgeResponse']>('/api/notifications/badge'),
+    refetchInterval: 60_000,
+  })
+  const unread = badgeQ.data?.count ?? 0
+
+  
+  const listQ = useQuery({
+    queryKey: [queryKeys.notifications, 'list'],
+    queryFn: () => api.get<Notification[]>('/api/notifications?limit=8'),
+    staleTime: 30_000,
+    enabled: open,
+  })
+  const notifications = Array.isArray(listQ.data) ? listQ.data : []
+
+  const invalidate = () => {
+    void qc.invalidateQueries({ queryKey: [queryKeys.notifications] })
+  }
+
+  const markAllReadM = useMutation({
+    mutationFn: () => api.post('/api/notifications/read-all'),
+    onSuccess: invalidate,
+  })
+
+  const markReadM = useMutation({
+    mutationFn: (id: string) => api.post(`/api/notifications/${id}/read`),
+    onSuccess: invalidate,
+  })
+
+  useEffect(() => {
+    const onClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onClickOutside)
+    return () => document.removeEventListener('mousedown', onClickOutside)
+  }, [])
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        
+        
+        
+        className="relative p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md
+          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+        aria-label="通知"
+        aria-haspopup="true"
+        aria-expanded={open}
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+        </svg>
+        {unread > 0 && (
+          
+          
+          <span className="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px]
+            px-1 text-xs font-bold text-white bg-destructive rounded-full">
+            {unread > 99 ? '99+' : unread}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border z-50"
+          role="dialog"
+          aria-label="通知列表"
+          onKeyDown={(e) => { if (e.key === 'Escape') setOpen(false) }}
+        >
+          <div className="flex items-center justify-between px-4 py-3 border-b">
+            <span className="text-sm font-semibold">通知</span>
+            {unread > 0 && (
+              <button
+                onClick={() => markAllReadM.mutate()}
+                disabled={markAllReadM.isPending}
+                className="text-xs text-primary hover:underline disabled:opacity-50
+                  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+              >全部已读</button>
+            )}
+          </div>
+          <ul className="max-h-80 overflow-y-auto list-none p-0 m-0" data-slot="notification-list">
+            {listQ.isPending ? (
+              
+              <li className="py-8 text-center text-sm text-muted-foreground" aria-live="polite">加载中…</li>
+            ) : notifications.length === 0 ? (
+              <li className="py-8 text-center text-sm text-muted-foreground">暂无通知</li>
+            ) : notifications.map((n) => (
+              <li key={n.id} className="border-b last:border-0">
+                {/* P2-19：条目是可操作元素——button 语义（Tab 可达、Enter 可触发）， */}
+                {/* 不再是 clickable div（键盘用户此前完全不可操作） */}
+                <button
+                  type="button"
+                  onClick={() => { if (n.link) onNavigate?.(n.link); markReadM.mutate(n.id); setOpen(false) }}
+                  className={cn(
+                    'w-full text-left px-4 py-3 cursor-pointer hover:bg-muted ' +
+                      'focus-visible:outline-none focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+                    !n.read_at && 'bg-accent/50',
+                  )}
+                >
+                  <span className="flex items-start justify-between gap-2">
+                    <span className="text-sm font-medium text-foreground">{n.title}</span>
+                    {n.count > 1 && (
+                      <span className="text-xs bg-muted text-muted-foreground px-1.5 py-0.5 rounded-full shrink-0">×{n.count}</span>
+                    )}
+                  </span>
+                  {n.body && <span className="block mt-0.5 text-xs text-muted-foreground line-clamp-2">{n.body}</span>}
+                  <span className="block mt-1 text-[10px] text-muted-foreground">{formatDateTime(n.created_at)}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}