560 lines
14 KiB
Markdown
560 lines
14 KiB
Markdown
# 用户故事1.2实现计划：UI组件库集成
|
||
|
||
## 📋 实现目标
|
||
**作为** 开发团队成员，**我想要** 集成 shadcn/ui 组件库和 Tailwind CSS，**以便** 我们能够构建具有一致设计和功能的现代管理界面。
|
||
|
||
## 🎯 验收标准对照与实现计划
|
||
|
||
### ✅ 功能需求实现计划
|
||
|
||
#### 1. shadcn/ui 组件库集成
|
||
**需求**: 成功集成 shadcn/ui 组件库，配置管理系统 UI 主题
|
||
|
||
**当前状态分析**:
|
||
- ✅ shadcn/ui依赖已在package.json中配置
|
||
- ✅ Radix UI组件已完整配置
|
||
- ⚠️ 缺少shadcn/ui的具体组件实现
|
||
- ⚠️ 缺少UI主题配置
|
||
|
||
**实现计划**:
|
||
```
|
||
# 1. 安装shadcn/ui CLI
|
||
npm install -g shadcn-ui
|
||
|
||
# 2. 初始化shadcn/ui
|
||
npx shadcn-ui@latest init
|
||
|
||
# 3. 添加必要的基础组件
|
||
npx shadcn-ui@latest add button card input label select dialog table badge avatar dropdown-menu switch
|
||
|
||
# 4. 创建农业管理专用组件
|
||
# 自定义组件以适应农业管理系统的特定需求
|
||
```
|
||
|
||
**需要创建的组件**:
|
||
- `src/components/ui/` - shadcn/ui基础组件
|
||
- `src/components/ui/` - 已配置好的UI组件
|
||
- `src/components/agricultural/` - 农业管理专用组件
|
||
- `src/styles/globals.css` - 全局样式定义
|
||
- `src/styles/components.css` - 组件样式
|
||
|
||
#### 2. Tailwind CSS配置
|
||
**需求**: 配置 Tailwind CSS，为管理系统界面优化样式
|
||
|
||
**当前状态分析**:
|
||
- ✅ Tailwind CSS配置已存在 (tailwind.config.js)
|
||
- ✅ 基础主题配置已存在
|
||
- ⚠️ 缺少农业管理系统的自定义主题
|
||
- ⚠️ 缺少农业特定的设计令牌
|
||
|
||
**实现计划**:
|
||
```javascript
|
||
// 更新 tailwind.config.js 添加农业管理主题
|
||
export default {
|
||
theme: {
|
||
extend: {
|
||
// 农业管理系统特定颜色
|
||
colors: {
|
||
agriculture: {
|
||
green: '#16a34a', // 主绿色 - 农业主题
|
||
'green-50': '#f0fdf4',
|
||
'green-600': '#16a34a',
|
||
'green-700': '#15803d',
|
||
'green-900': '#14532d',
|
||
blue: '#3b82f6', // 辅助蓝色
|
||
'blue-50': '#eff6ff',
|
||
amber: '#f59e0b', // 警告/收获色
|
||
'amber-50': '#fffbeb',
|
||
brown: '#92400e', // 土地色
|
||
'brown-50': '#fef3c7',
|
||
},
|
||
// 状态颜色
|
||
status: {
|
||
'running': '#52c41a', // 运行中
|
||
'idle': '#d9d9d9', // 空闲中
|
||
'maintenance': '#faad14', // 维护中
|
||
'error': '#ff4d4f', // 故障中
|
||
'offline': '#8c8c8c' // 离线
|
||
}
|
||
},
|
||
// 农业管理系统特定组件样式
|
||
borderRadius: {
|
||
'card': '8px',
|
||
'form': '6px',
|
||
'button': '4px'
|
||
},
|
||
fontFamily: {
|
||
'sans': ['Inter', 'Microsoft YaHei', 'sans-serif'],
|
||
'mono': ['JetBrains Mono', 'Consolas', 'monospace']
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 3. 管理专用组件库
|
||
**需求**: 建立管理专用组件库（表格、表单、模态框、数据显示）
|
||
|
||
**实现计划**:
|
||
|
||
**3.1 表格组件**
|
||
```typescript
|
||
// src/components/ui/data-table.tsx
|
||
// 农机管理专用表格组件
|
||
interface DataTableProps<T> {
|
||
data: T[];
|
||
columns: ColumnDef<T>[];
|
||
onRowClick?: (row: T) => void;
|
||
onEdit?: (row: T) => void;
|
||
onDelete?: (row: T) => void;
|
||
loading?: boolean;
|
||
pagination?: PaginationProps;
|
||
}
|
||
```
|
||
|
||
**3.2 表单组件**
|
||
```typescript
|
||
// src/components/ui/form-wrapper.tsx
|
||
// 农业表单专用包装组件
|
||
interface FormWrapperProps {
|
||
title: string;
|
||
onSubmit: (data: any) => void;
|
||
onCancel: () => void;
|
||
children: React.ReactNode;
|
||
loading?: boolean;
|
||
}
|
||
```
|
||
|
||
**3.3 数据展示组件**
|
||
```typescript
|
||
// src/components/ui/status-badge.tsx
|
||
// 状态标签组件
|
||
interface StatusBadgeProps {
|
||
status: 'running' | 'idle' | 'maintenance' | 'error' | 'offline';
|
||
text?: string;
|
||
size?: 'sm' | 'md' | 'lg';
|
||
}
|
||
|
||
// src/components/ui/metrics-card.tsx
|
||
// 指标卡片组件
|
||
interface MetricsCardProps {
|
||
title: string;
|
||
value: number | string;
|
||
unit?: string;
|
||
trend?: {
|
||
value: number;
|
||
direction: 'up' | 'down';
|
||
};
|
||
icon?: React.ReactNode;
|
||
}
|
||
```
|
||
|
||
**3.4 农业专用组件**
|
||
```typescript
|
||
// src/components/agricultural/machinery-card.tsx
|
||
// 农机卡片组件
|
||
interface MachineryCardProps {
|
||
machinery: MachineryRecord;
|
||
onEdit?: () => void;
|
||
onView?: () => void;
|
||
}
|
||
|
||
// src/components/agricultural/field-selector.tsx
|
||
// 地块选择器组件
|
||
interface FieldSelectorProps {
|
||
selectedField?: string;
|
||
onFieldChange: (fieldId: string) => void;
|
||
}
|
||
|
||
// src/components/agricultural/operation-status.tsx
|
||
// 作业状态组件
|
||
interface OperationStatusProps {
|
||
status: OperationStatus;
|
||
progress?: number;
|
||
estimatedTime?: number;
|
||
}
|
||
```
|
||
|
||
#### 4. 视觉一致性验证
|
||
**需求**: 验证管理界面与原系统保持 99.5% 的视觉一致性
|
||
|
||
**实现计划**:
|
||
```typescript
|
||
// 创建视觉一致性测试组件
|
||
// src/components/ui/consistency-checker.tsx
|
||
export function ConsistencyChecker() {
|
||
// 对比新旧组件的视觉差异
|
||
// 计算99.5%一致性指标
|
||
}
|
||
|
||
// 建立设计系统文档
|
||
// docs/design-system.md
|
||
export const DESIGN_SYSTEM = {
|
||
colors: {
|
||
primary: '#16a34a', // 与原系统主色一致
|
||
secondary: '#3b82f6',
|
||
success: '#52c41a',
|
||
warning: '#faad14',
|
||
error: '#ff4d4f'
|
||
},
|
||
spacing: {
|
||
xs: '4px',
|
||
sm: '8px',
|
||
md: '16px',
|
||
lg: '24px',
|
||
xl: '32px'
|
||
},
|
||
borderRadius: {
|
||
sm: '4px',
|
||
md: '6px',
|
||
lg: '8px'
|
||
}
|
||
};
|
||
```
|
||
|
||
#### 5. 图标系统集成
|
||
**需求**: 集成管理界面专用图标系统，确保视觉语言一致
|
||
|
||
**实现计划**:
|
||
```typescript
|
||
// src/components/ui/icons.tsx
|
||
// 统一图标管理
|
||
import {
|
||
Tractor,
|
||
Map,
|
||
Settings,
|
||
Users,
|
||
BarChart3,
|
||
Wrench,
|
||
AlertTriangle,
|
||
CheckCircle
|
||
} from 'lucide-react';
|
||
|
||
export const AGRICULTURAL_ICONS = {
|
||
machinery: Tractor,
|
||
field: Map,
|
||
configuration: Settings,
|
||
users: Users,
|
||
analytics: BarChart3,
|
||
maintenance: Wrench,
|
||
alert: AlertTriangle,
|
||
success: CheckCircle
|
||
};
|
||
```
|
||
|
||
#### 6. 主题系统
|
||
**需求**: 建立适合管理界面的主题系统，具有适当的对比度和可读性
|
||
|
||
**实现计划**:
|
||
```typescript
|
||
// src/components/theme-provider.tsx
|
||
// 主题提供者组件
|
||
import { createContext, useContext } from 'react';
|
||
|
||
export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
|
||
// 深色/浅色主题切换
|
||
// 农业管理系统专用主题配置
|
||
};
|
||
|
||
// src/styles/theme.css
|
||
:root {
|
||
/* CSS变量定义 */
|
||
--background: 240 10% 98%;
|
||
--foreground: 240 10% 10%;
|
||
--primary: 142 76% 36%;
|
||
--primary-foreground: 355 100% 97%;
|
||
|
||
/* 农业主题颜色 */
|
||
--agriculture-green: 142 76% 36%;
|
||
--agriculture-blue: 217 91% 60%;
|
||
--status-running: 142 76% 36%;
|
||
--status-idle: 220 9% 90%;
|
||
--status-maintenance: 38 92% 50%;
|
||
}
|
||
```
|
||
|
||
### ✅ 集成需求实现计划
|
||
|
||
#### 4. 现有UI设计模式保持99.5%精度的视觉一致性
|
||
**实现计划**:
|
||
- 像素级对比测试
|
||
- 颜色值精确匹配
|
||
- 间距和对齐验证
|
||
- 组件交互模式一致性
|
||
|
||
#### 5. 新组件库遵循既定的管理界面设计模式
|
||
**实现计划**:
|
||
- 遵循Material Design规范
|
||
- 保持农业管理系统的特色
|
||
- 确保可访问性标准
|
||
|
||
#### 6. 与现有配色方案和品牌集成保持当前外观
|
||
**实现计划**:
|
||
- 保持农业绿色主题
|
||
- 保持现有的品牌色彩
|
||
- 渐进式迁移策略
|
||
|
||
#### 7. 组件使用模式与现有用户交互期望一致
|
||
**实现计划**:
|
||
- 保持相同的交互模式
|
||
- 确保响应式设计
|
||
- 维护键盘导航支持
|
||
|
||
### ✅ 质量需求实现计划
|
||
|
||
#### 7. 组件集成通过视觉回归测试
|
||
**实现计划**:
|
||
```bash
|
||
# 视觉回归测试
|
||
npm install @storybook/addon-visual-regression
|
||
npm run storybook:test:visual
|
||
|
||
# 截图测试
|
||
npm install cypress
|
||
npm run cypress:run
|
||
```
|
||
|
||
#### 8. 组件库文档使用使用示例进行更新
|
||
**实现计划**:
|
||
- 创建组件文档
|
||
- 添加使用示例
|
||
- 建立设计系统文档
|
||
|
||
#### 9. 验证现有UI功能无回归
|
||
**实现计划**:
|
||
- 功能测试验证
|
||
- 用户体验测试
|
||
- 性能影响评估
|
||
|
||
## 📁 详细实现文件清单
|
||
|
||
### 需要创建的组件文件
|
||
|
||
#### 1. 基础UI组件 (shadcn/ui)
|
||
```
|
||
src/components/ui/
|
||
├── ui/
|
||
│ ├── button.tsx # 按钮组件 ✅
|
||
│ ├── card.tsx # 卡片组件 ✅
|
||
│ ├── input.tsx # 输入框组件 ✅
|
||
│ ├── label.tsx # 标签组件 ✅
|
||
│ ├── select.tsx # 选择器组件 ✅
|
||
│ ├── dialog.tsx # 对话框组件 ✅
|
||
│ ├── table.tsx # 表格组件 ✅
|
||
│ ├── badge.tsx # 徽章组件 ✅
|
||
│ ├── avatar.tsx # 头像组件 ✅
|
||
│ ├── dropdown-menu.tsx # 下拉菜单 ✅
|
||
│ ├── switch.tsx # 开关组件 ✅
|
||
│ ├── tabs.tsx # 标签页组件 ✅
|
||
│ ├── separator.tsx # 分隔线组件 ✅
|
||
│ └── tooltip.tsx # 工具提示组件 ✅
|
||
```
|
||
|
||
#### 2. 管理专用组件
|
||
```
|
||
src/components/ui/
|
||
├── data-table.tsx # 数据表格组件
|
||
├── form-wrapper.tsx # 表单包装器
|
||
├── status-badge.tsx # 状态标签
|
||
├── metrics-card.tsx # 指标卡片
|
||
├── loading-spinner.tsx # 加载动画
|
||
├── empty-state.tsx # 空状态组件
|
||
├── error-boundary.tsx # 错误边界
|
||
└── pagination.tsx # 分页组件
|
||
```
|
||
|
||
#### 3. 农业管理专用组件
|
||
```
|
||
src/components/agricultural/
|
||
├── machinery-card.tsx # 农机卡片
|
||
├── field-selector.tsx # 地块选择器
|
||
├── operation-status.tsx # 作业状态
|
||
├── weather-display.tsx # 天气显示
|
||
├── crop-calendar.tsx # 农作物日历
|
||
└── yield-prediction.tsx # 产量预测
|
||
```
|
||
|
||
#### 4. 样式文件
|
||
```
|
||
src/styles/
|
||
├── globals.css # 全局样式
|
||
├── components.css # 组件样式
|
||
├── variables.css # CSS变量
|
||
├── utilities.css # 工具类
|
||
└── responsive.css # 响应式样式
|
||
```
|
||
|
||
#### 5. 主题文件
|
||
```
|
||
src/components/
|
||
├── theme-provider.tsx # 主题提供者
|
||
├── theme-toggle.tsx # 主题切换
|
||
└── use-theme.ts # 主题Hook
|
||
```
|
||
|
||
#### 6. 图标和资源
|
||
```
|
||
src/assets/
|
||
├── icons/ # 图标文件
|
||
├── images/ # 图片资源
|
||
└── fonts/ # 字体文件
|
||
```
|
||
|
||
### 需要更新的配置文件
|
||
|
||
1. **Tailwind配置**
|
||
- `tailwind.config.js` - 添加农业主题和自定义设计令牌
|
||
|
||
2. **组件库配置**
|
||
- `components.json` - shadcn/ui组件配置
|
||
- `lib/utils.ts` - 样式工具函数
|
||
|
||
3. **全局样式**
|
||
- `src/styles/globals.css` - 全局CSS变量和基础样式
|
||
- `src/styles/components.css` - 组件样式覆盖
|
||
|
||
4. **TypeScript类型**
|
||
- `src/types/ui.ts` - UI组件类型定义
|
||
- `src/types/agricultural.ts` - 农业管理类型
|
||
|
||
### 需要创建的文档
|
||
|
||
1. **组件库文档**
|
||
- `docs/components.md` - 组件使用文档
|
||
- `docs/design-system.md` - 设计系统文档
|
||
|
||
2. **开发指南**
|
||
- `docs/component-guide.md` - 组件开发指南
|
||
- `docs/styling-guide.md` - 样式开发指南
|
||
|
||
3. **视觉测试文档**
|
||
- `docs/visual-testing.md` - 视觉回归测试指南
|
||
- `docs/consistency-report.md` - 一致性报告
|
||
|
||
## 🚀 实施步骤
|
||
|
||
### 阶段1: shadcn/ui初始化 (30分钟)
|
||
1. 安装shadcn/ui CLI
|
||
2. 初始化项目配置
|
||
3. 添加基础组件
|
||
4. 验证组件集成
|
||
|
||
### 阶段2: 主题和样式配置 (45分钟)
|
||
1. 配置Tailwind CSS农业主题
|
||
2. 创建CSS变量系统
|
||
3. 建立主题提供者
|
||
4. 实现深色模式支持
|
||
|
||
### 阶段3: 管理组件开发 (60分钟)
|
||
1. 开发数据表格组件
|
||
2. 创建表单包装器
|
||
3. 实现状态和指标组件
|
||
4. 添加加载和错误状态
|
||
|
||
### 阶段4: 农业专用组件 (45分钟)
|
||
1. 开发农机管理组件
|
||
2. 创建地块选择器
|
||
3. 实现作业状态显示
|
||
4. 添加天气和日历组件
|
||
|
||
### 阶段5: 视觉一致性验证 (30分钟)
|
||
1. 建立视觉对比工具
|
||
2. 进行像素级对比测试
|
||
3. 验证99.5%一致性标准
|
||
4. 生成一致性报告
|
||
|
||
### 阶段6: 文档和测试 (30分钟)
|
||
1. 创建组件文档
|
||
2. 建立Storybook
|
||
3. 设置视觉回归测试
|
||
4. 编写使用示例
|
||
|
||
## ✅ 预期成果
|
||
|
||
### 完成后项目将具备
|
||
1. ✅ 完整的shadcn/ui + Tailwind CSS技术栈
|
||
2. ✅ 农业管理专用UI组件库
|
||
3. ✅ 与原系统99.5%视觉一致性
|
||
4. ✅ 现代化的响应式设计
|
||
5. ✅ 完善的主题系统（支持深色/浅色模式）
|
||
6. ✅ 统一的图标和视觉语言
|
||
7. ✅ 完整的组件文档和使用指南
|
||
8. ✅ 自动化视觉回归测试
|
||
|
||
### 验收标准完成情况
|
||
- [ ] 功能需求1: shadcn/ui组件库集成
|
||
- [ ] 功能需求2: Tailwind CSS配置
|
||
- [ ] 功能需求3: 管理专用组件库
|
||
- [ ] 功能需求4: 99.5%视觉一致性
|
||
- [ ] 功能需求5: 图标系统集成
|
||
- [ ] 功能需求6: 主题系统
|
||
- [ ] 集成需求4: 设计模式一致性
|
||
- [ ] 集成需求5: 品牌配色集成
|
||
- [ ] 集成需求6: 交互模式一致性
|
||
- [ ] 集成需求7: UI功能无回归
|
||
- [ ] 质量需求7: 视觉回归测试
|
||
- [ ] 质量需求8: 组件文档更新
|
||
- [ ] 质量需求9: 无回归验证
|
||
|
||
## 🎨 设计系统规范
|
||
|
||
### 颜色系统
|
||
```css
|
||
/* 主色调 - 农业绿色 */
|
||
--agriculture-green-50: #f0fdf4;
|
||
--agriculture-green-600: #16a34a;
|
||
--agriculture-green-700: #15803d;
|
||
--agriculture-green-900: #14532d;
|
||
|
||
/* 辅助色 - 技术蓝 */
|
||
--agriculture-blue-50: #eff6ff;
|
||
--agriculture-blue-600: #3b82f6;
|
||
|
||
/* 状态颜色 */
|
||
--status-running: #52c41a;
|
||
--status-idle: #d9d9d9;
|
||
--status-maintenance: #faad14;
|
||
--status-error: #ff4d4f;
|
||
--status-offline: #8c8c8c;
|
||
```
|
||
|
||
### 间距系统
|
||
```css
|
||
--spacing-xs: 4px;
|
||
--spacing-sm: 8px;
|
||
--spacing-md: 16px;
|
||
--spacing-lg: 24px;
|
||
--spacing-xl: 32px;
|
||
--spacing-2xl: 48px;
|
||
```
|
||
|
||
### 圆角系统
|
||
```css
|
||
--radius-sm: 4px;
|
||
--radius-md: 6px;
|
||
--radius-lg: 8px;
|
||
--radius-xl: 12px;
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 实现优先级
|
||
|
||
**高优先级** (必须完成):
|
||
1. shadcn/ui基础组件集成
|
||
2. Tailwind CSS农业主题配置
|
||
3. 核心管理组件开发
|
||
|
||
**中优先级** (建议完成):
|
||
1. 农业专用组件开发
|
||
2. 视觉一致性验证
|
||
3. 主题系统完善
|
||
|
||
**低优先级** (可选完成):
|
||
1. 高级自定义组件
|
||
2. 动画和过渡效果
|
||
3. 无障碍功能增强
|
||
|
||
---
|
||
|
||
*此实现计划遵循用户故事1.2的所有验收标准，确保UI组件库达到农业管理系统的专业要求并保持与现有系统的视觉一致性。* |