107 lines
3.8 KiB
Markdown
107 lines
3.8 KiB
Markdown
在 /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)"
|
||
```
|