hive-manage-v3/docs/superpowers/plans/task-0.7-spec.md

在 /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 函数（命令式调用），非组件

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

创建完成后提交:

cd /home/enzo/projects/hive-manage-v3 && git add frontend/src/components/ui/ && git commit -m "feat: shared UI component library (11 components)"