# Smart Crop UI - 配置管理系统页面映射关系

## 项目概述

本文档记录了从原始项目到crop-x项目的页面映射关系，以及样式复刻的实现方式。

## 页面映射关系

### 1. 企业审核管理页面
- **原始文件**: `D:\code\repotest\smart-crop-ui\src\components\dashboard\EnterpriseAudit.tsx`
- **目标文件**: `D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\tenant\enterprise-audit\page.tsx`
- **组件结构**:
  - `AuditStatsCards` - 统计卡片组件
  - `SearchFilters` - 搜索筛选组件
  - `EnterpriseList` - 企业列表组件
  - `EnterpriseDetailDialog` - 企业详情对话框

### 2. 审核历史页面
- **原始文件**: `D:\code\repotest\smart-crop-ui\src\components\dashboard\AuditHistory.tsx`
- **目标文件**: `D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\tenant\audit-history\page.tsx`
- **组件结构**:
  - `AuditHistoryStatsCards` - 统计卡片组件
  - `AuditHistoryFilters` - 筛选器组件
  - `AuditHistoryList` - 审核历史列表
  - `AuditHistoryDetailDialog` - 审核详情对话框

### 3. 企业信息管理页面
- **原始文件**: `D:\code\repotest\smart-crop-ui\src\components\dashboard\EnterpriseInfo.tsx`
- **目标文件**: `D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\tenant\enterprise-info\page.tsx`
- **组件结构**:
  - `EnterpriseInfoHeader` - 页面头部组件
  - `AuditStatusAlert` - 审核状态提醒
  - `BasicInfoForm` - 基本信息表单
  - `OtherInfoForm` - 其他信息表单
  - `BankInfoForm` - 银行信息表单
  - `LegalInfoForm` - 法人信息表单

### 4. 用户管理页面
- **原始文件**: `D:\code\repotest\smart-crop-ui\src\components\dashboard\UserManagement.tsx`
- **目标文件**: `D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\tenant\user-management\page.tsx`
- **组件结构**:
  - `UserManagementHeader` - 页面头部组件
  - `UserManagementStatsCards` - 统计卡片组件
  - `UserManagementFilters` - 筛选器组件
  - `UserList` - 用户列表组件
  - `UserFormDialog` - 用户表单对话框
  - `UserDetailDialog` - 用户详情对话框

### 5. 员工管理页面
- **原始文件**: `D:\code\repotest\smart-crop-ui\src\components\dashboard\EmployeeManagement.tsx`
- **目标文件**: `D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\user\employee\page.tsx`
- **组件结构**:
  - `EmployeeManagementHeader` - 页面头部组件
  - `EmployeeManagementStatsCards` - 统计卡片组件
  - `EmployeeManagementFilters` - 筛选器组件
  - `EmployeeList` - 员工列表组件
  - `EmployeeFormDialog` - 员工表单对话框
  - `EmployeeDetailDialog` - 员工详情对话框

### 6. 角色管理页面
- **原始文件**: `D:\code\repotest\smart-crop-ui\src\components\dashboard\RoleManagement.tsx`
- **目标文件**: `D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\user\role\page.tsx`
- **组件结构**:
  - `RoleManagementHeader` - 页面头部组件
  - `RoleManagementStatsCards` - 统计卡片组件
  - `RoleSearch` - 角色搜索组件
  - `RoleList` - 角色列表组件
  - `RoleFormDialog` - 角色表单对话框
  - `RoleDetailDialog` - 角色详情对话框
  - `RoleManagementInstructions` - 使用说明组件

## 样式复刻实现方式

### 1. 技术栈对齐
- **UI框架**: 使用shadcn/ui组件库替代原始UI组件
- **样式系统**: 使用Tailwind CSS实现相同的视觉效果
- **图标库**: 使用lucide-react替代原始图标库
- **状态管理**: 保持React hooks状态管理模式

### 2. 样式映射原则

#### 颜色系统映射
```typescript
// 原始颜色系统 -> Tailwind CSS类
primary-green -> bg-green-600, text-green-600
primary-blue -> bg-blue-600, text-blue-600
success-green -> bg-green-100, text-green-700
warning-yellow -> bg-yellow-100, text-yellow-700
error-red -> bg-red-100, text-red-700
gray-scale -> bg-gray-50, text-gray-600
```

#### 组件样式复刻
- **Card组件**: 使用`@/components/ui/card`包装内容
- **Button组件**: 使用`@/components/ui/button`并应用变体
- **Table组件**: 使用`@/components/ui/table`保持表格结构
- **Dialog组件**: 使用`@/components/ui/dialog`实现弹窗
- **Badge组件**: 使用`@/components/ui/badge`显示状态标签

#### 布局系统
```typescript
// 响应式布局
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

// 弹性布局
<div className="flex items-center justify-between">

// 间距系统
<div className="space-y-6">  // 垂直间距
<div className="flex gap-4">   // 水平间距
```

### 3. 功能实现保持

#### 状态管理模式
```typescript
// 保持原有的状态管理模式
const [data, setData] = useState<DataType[]>([]);
const [searchKeyword, setSearchKeyword] = useState('');
const [showForm, setShowForm] = useState(false);
```

#### 数据持久化
```typescript
// 使用LocalStorage保持数据持久化
localStorage.setItem('smart_agriculture_data', JSON.stringify(data));
```

#### 交互反馈
```typescript
// 使用sonner保持相同的toast提示
import { toast } from 'sonner';
toast.success('操作成功');
toast.error('操作失败');
```

### 4. 类型系统迁移

#### 接口定义
- 为每个页面创建完整的TypeScript类型定义
- 保持原有的数据结构不变
- 增强类型安全检查

#### 类型文件组织
```typescript
// 每个功能模块独立的类型文件
export interface Enterprise { ... }
export interface User { ... }
export interface Role { ... }
```

### 5. 组件拆分策略

#### 单一职责原则
- 将复杂页面拆分为多个独立组件
- 每个组件负责特定的功能区域
- 通过props传递数据和回调函数

#### 可复用性设计
- 统计卡片组件可在多个页面复用
- 筛选器组件保持一致的交互模式
- 表单组件采用相同的验证机制

### 6. 实现规范

#### 命名约定
- 组件文件使用PascalCase命名
- 组件导出使用命名导出
- 类型定义使用接口而非类型别名

#### 代码组织
```typescript
// 导入顺序
1. React相关导入
2. 第三方库导入
3. UI组件导入
4. 类型定义导入
5. 本地组件导入

// 组件结构
1. 接口定义
2. 组件实现
3. 默认导出
```

## 开发注意事项

### 1. 路径映射
- 确保所有导入路径正确
- 使用相对路径导入本地组件
- 使用绝对路径导入UI组件

### 2. 数据一致性
- 保持与原始数据结构的一致性
- 确保所有CRUD操作正常工作
- 维护数据的完整性

### 3. 用户体验
- 保持与原始页面相同的交互流程
- 确保响应式设计正常工作
- 维护一致的用户反馈机制

### 4. 测试验证
- 验证所有功能正常工作
- 检查样式在不同屏幕尺寸下的表现
- 确保数据持久化功能正常

---

*本文档记录了Smart Crop UI配置管理系统的完整映射关系和实现方式，为后续开发提供参考。*

待实现的映射关系，一口气给我实现，并且更新映射关系.md

菜单管理

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\user\menu\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\MenuManagement.tsx

权限配置管理 页面

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\user\permission\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\PermissionManagement.tsx

系统设置 页面

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\system\settings\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\SystemSettings.tsx



 页面 登录日志

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\monitor\login-log\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\LoginLog.tsx



页面 操作日志

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\monitor\operation-log

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\OperationLog.tsx



页面 性能监控

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\monitor\performance\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\PerformanceMonitor.tsx



页面 网络日志

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\monitor\network-log\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\NetworkLog.tsx



页面 消息发送

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\message\send\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\MessageSend.tsx



实现以下文件：

要求：与参考文件一摸一样的效果。

页面 消息模板

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\message\template\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\MessageTemplate.tsx



页面 消息日志

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\message\log\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\MessageLog.tsx



参考页面实现新的页面，要求如下

1.参考页面中所有引入必须找import引入的文件，学习后再开发

2.在当前目录下新建components文件，分模块开发，做到高内聚，低耦合，功能抽成组件。

3.样式尽量做到一摸一样。

4.注意原来文件中的中文 utf-8编码问题

主要问题：1：1是实现消息模板页面

需实现文件：D:\code\repotest\smart-crop-ui\crop-x\src\app\(app)\central-config\message\template\page.tsx

参考文件:D:\code\repotest\smart-crop-ui\src\components\config\MessageTemplate.tsx

