在 /home/enzo/projects/hive-manage-v3/frontend/src/components/ui/ 下创建 11 个 React + TypeScript 共享 UI 组件。

所有组件必须：
- 使用 CSS 变量（如 var(--bg-card), var(--text), var(--honey) 等，定义在 tokens.css）
- 支持 className prop 扩展
- 导出类型（Props interface）
- 使用 Tailwind 辅助类 + CSS 变量混合

## 组件 1: Button.tsx

Props: variant ('primary'|'danger'|'outline'|'ghost'), size ('sm'|'md'), loading, disabled, children, onClick, className, type
- Primary: bg=var(--honey) color=#000 font-weight:600
- Danger: border=var(--red) color=var(--red)
- Outline: border=var(--border) color=var(--text-dim)
- Ghost: color=var(--text-dim), border:none
- 尺寸: sm padding:4px 10px font-size:12px, md padding:7px 14px font-size:13px
- Loading 态: 文字透明 + 14px spinner
- Disabled: opacity:0.4 cursor:not-allowed

## 组件 2: Card.tsx

Props: label, value, valueColor, change, changeDirection ('up'|'down'|'neutral'), onClick, className
- 渲染: 顶部 label(12px uppercase), 中间 value(28px bold), 底部 change(12px)
- valueColor 支持: 'green','red','yellow','blue' 映射到对应 CSS 变量
- changeDirection: up=var(--green) '↑', down=var(--red) '↓', neutral=var(--text-dim) '→'

## 组件 3: Table.tsx

Props: columns ({key,label,width?}[]), data (record[]), rowKey, onRowClick, rowClassName (record=>string), emptyText
- 表头 sticky top:0, 12px uppercase text-dim
- 行高 44px, hover 时 bg=var(--bg-hover)
- 支持 row-danger 样式（bg=var(--bg-error)）
- 空数据: 显示 emptyText 或 "暂无数据"

## 组件 4: Badge.tsx

Props: variant ('success'|'danger'|'warning'|'info'|'honey'|'outline'), children, className
- 胶囊形: padding:2px 8px, border-radius:10px, font-size:11px, font-weight:600
- 每种 variant 对应不同背景色（rgba 半透明）+ 文字色

## 组件 5: Modal.tsx

Props: open, onClose, title, children, footer, confirmText, onConfirm, confirmDanger, width
- 遮罩: rgba(0,0,0,0.6), 居中 flex
- 弹窗: bg=var(--bg-nav), border-radius:8px, max-width:500px
- 关闭方式: ✕ 按钮 / 点遮罩 / Esc 键
- confirmDanger 时确认按钮变红色
- Portal 渲染到 document.body

## 组件 6: Drawer.tsx

Props: open, onClose, title, children, footer, width (默认 480px)
- 右侧滑入: transform translateX(100%→0), transition 250ms ease
- 遮罩 + Esc 关闭
- Header 固定顶部, Body 可滚动, Footer 固定底部

## 组件 7: Toast.tsx

导出: toast 函数（命令式调用），非组件
```typescript
toast.success('操作成功')
toast.error('操作失败')
toast.warn('请注意')
toast.info('提示信息')
```
- 顶部居中, 最大宽度 480px
- success 3s 消失, error 5s 消失, warn 手动关闭
- 堆叠: 最多 3 条
- 动画: translateY + opacity

## 组件 8: Skeleton.tsx

Props: variant ('card'|'table'|'text'), count (行数)
- card: 矩形块占位
- table: 横向条占位
- text: 短条占位
- shimmer 动画: linear-gradient 1500ms infinite

## 组件 9: Toggle.tsx

Props: checked, onChange, label, disabled
- 44×24px, 滑块 20×20px 白色
- Off: bg=var(--bg-hover), On: bg=var(--honey)
- 滑块动画 translateX(20px)
- 标签在右侧, gap 8px, font-size 13px

## 组件 10: Timeline.tsx

Props: events ({time, type, label, color?}[])
- 横向时间线, flex 布局
- 每个点 8px 直径, 线 2px var(--border)
- Hover 点上浮 2px + tooltip
- 颜色: green(心跳恢复), red(超时), orange(飞书断连), blue(重启)

## 组件 11: SearchBox.tsx

Props: onSearch, placeholder, debounceMs (默认 300)
- 输入框: bg=var(--bg-card), border focus 变 var(--honey)
- 下拉面板: 分组结果, bg=var(--bg-elevated)
- 键盘: ↑↓ 导航, Enter 选择, Esc 关闭
- 宽度: 桌面 420px

创建完成后提交:
```bash
cd /home/enzo/projects/hive-manage-v3 && git add frontend/src/components/ui/ && git commit -m "feat: shared UI component library (11 components)"
```