smart-crop-ui/docs/LandInformation模块页面结构示例.md

# LandInformation 模块页面结构示例

基于 navigation.ts 中的 fieldMenus，为 LandInformation 模块创建完整的页面目录结构。

## 1. 地块档案管理 (FieldArchive) 模块

### 1.1 地块信息录入与维护 (FieldEntryMaintenance)

```
pages/LandInformation/Archive/FieldEntryMaintenance/
├── 📄 index.jsx                    # 主组件
├── 📄 index.css                   # 主样式文件
├── 📄 index.types.ts              # 类型定义
├── 📂 hooks/                      # 页面专用Hooks
│   ├── 📄 usePageData.tsx         # 数据管理Hook
│   ├── 📄 usePageActions.tsx      # 操作Hook
│   └── 📄 useFieldForm.tsx        # 地块表单Hook
├── 📂 utils/                      # 工具函数
│   ├── 📄 pageHelpers.tsx         # 页面工具函数
│   ├── 📄 coordinateUtils.tsx     # 坐标处理工具
│   ├── 📄 areaCalculators.tsx     # 面积计算工具
│   └── 📄 validators.tsx          # 验证函数
├── 📄 constants.tsx               # 常量定义
└── 📂 components/                  # 子组件目录
    ├── 📂 FieldForm/              # 地块表单组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 FieldList/              # 地块列表组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 FieldTable/             # 地块表格组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 FieldMap/               # 地块地图组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 CoordinateInput/        # 坐标输入组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 AreaDisplay/            # 面积显示组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 SoilInfo/               # 土壤信息组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 FieldFilter/            # 地块筛选组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    └── 📂 FieldDetails/           # 地块详情组件
        ├── 📄 index.jsx
        ├── 📄 index.css
        └── 📄 types.ts
```

### 1.2 地块分类与标签管理 (FieldClassificationTags)

```
pages/LandInformation/Archive/FieldClassificationTags/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│   ├── 📄 usePageData.js
│   ├── 📄 usePageActions.js
│   └── 📄 useClassification.js
├── 📂 utils/
│   ├── 📄 pageHelpers.js
│   └── 📄 categoryHelpers.js
├── 📂 constants.js
└── 📂 components/
    ├── 📂 FieldCategoryTree/      # 地块分类树组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 FieldTagManager/        # 地块标签管理组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 CategoryForm/           # 分类表单组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 TagForm/                # 标签表单组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 FieldTagSelector/       # 地块标签选择器
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    └── 📂 CategoryStats/          # 分类统计组件
        ├── 📄 index.jsx
        ├── 📄 index.css
        └── 📄 types.ts
```

## 2. 地块数字化与地图管理 (FieldMap) 模块

### 2.1 GIS地图管理 (FieldGISMap)

```
pages/LandInformation/Map/GISMap/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│   ├── 📄 usePageData.js
│   ├── 📄 usePageActions.js
│   ├── 📄 useGISMap.js
│   └── 📄 useMapLayers.js
├── 📂 utils/
│   ├── 📄 pageHelpers.js
│   ├── 📄 mapUtils.js
│   ├── 📄 layerUtils.js
│   └── 📄 coordinateTransform.js
├── 📂 constants.js
└── 📂 components/
    ├── 📂 GISMapView/             # GIS地图视图组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 LayerControl/           # 图层控制组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 MapToolbar/             # 地图工具栏组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 LayerManager/           # 图层管理器组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 BaseMapSelector/        # 底图选择器组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 MapScale/               # 地图比例尺组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    └── 📂 MapOverview/            # 地图鹰眼组件
        ├── 📄 index.jsx
        ├── 📄 index.css
        └── 📄 types.ts
```

### 2.2 数字化绘制与编辑 (FieldDrawEdit)

```
pages/LandInformation/Map/DrawEdit/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│   ├── 📄 usePageData.js
│   ├── 📄 usePageActions.js
│   ├── 📄 useDrawTools.js
│   └── 📄 useGeometryEditor.js
├── 📂 utils/
│   ├── 📄 pageHelpers.js
│   ├── 📄 drawUtils.js
│   ├── 📄 geometryUtils.js
│   └── 📄 editUtils.js
├── 📂 constants.js
└── 📂 components/
    ├── 📂 DrawTools/              # 绘制工具组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 EditTools/              # 编辑工具组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 GeometryEditor/         # 几何编辑器组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 VertexEditor/           # 顶点编辑器组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 StyleEditor/            # 样式编辑器组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 AttributeEditor/        # 属性编辑器组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    └── 📂 DrawPreview/            # 绘制预览组件
        ├── 📄 index.jsx
        ├── 📄 index.css
        └── 📄 types.ts
```

### 2.3 空间数据管理 (FieldSpatialQuery)

```
pages/LandInformation/Map/SpatialQuery/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│   ├── 📄 usePageData.js
│   ├── 📄 usePageActions.js
│   ├── 📄 useSpatialQuery.js
│   └── 📄 useDataLayers.js
├── 📂 utils/
│   ├── 📄 pageHelpers.js
│   ├── 📄 spatialUtils.js
│   ├── 📄 queryUtils.js
│   └── 📄 dataUtils.js
├── 📂 constants.js
└── 📂 components/
    ├── 📂 SpatialQueryBuilder/    # 空间查询构建器
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 QueryResult/            # 查询结果组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 DataLayerManager/       # 数据图层管理器
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 AttributeQuery/         # 属性查询组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 BufferAnalysis/         # 缓冲区分析组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 OverlayAnalysis/        # 叠加分析组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    └── 📂 SpatialStatistics/      # 空间统计组件
        ├── 📄 index.jsx
        ├── 📄 index.css
        └── 📄 types.ts
```

### 2.4 地块影像 (FieldSatellite)

```
pages/LandInformation/Map/Satellite/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│   ├── 📄 usePageData.js
│   ├── 📄 usePageActions.js
│   ├── 📄 useSatelliteImage.js
│   └── 📄 useImageAnalysis.js
├── 📂 utils/
│   ├── 📄 pageHelpers.js
│   ├── 📄 imageUtils.js
│   ├── 📄 rasterUtils.js
│   └── 📄 analysisUtils.js
├── 📂 constants.js
└── 📂 components/
    ├── 📂 SatelliteViewer/        # 卫星影像查看器
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 ImageTimeline/          # 影像时间轴组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 ImageLayerControl/      # 影像图层控制
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 ImageComparison/        # 影像对比组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 NDVIAnalysis/           # 植被指数分析组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 ImageExport/            # 影像导出组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    └── 📄 ImageMetadata/          # 影像元数据组件
        ├── 📄 index.jsx
        ├── 📄 index.css
        └── 📄 types.ts
```

## 3. 空间分析与决策支持 (FieldAnalysis) 模块

### 3.1 土壤基础数据 (SoilData)

```
pages/LandInformation/Analysis/SoilData/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│   ├── 📄 usePageData.js
│   ├── 📄 usePageActions.js
│   ├── 📄 useSoilData.js
│   └── 📄 useSoilAnalysis.js
├── 📂 utils/
│   ├── 📄 pageHelpers.js
│   ├── 📄 soilUtils.js
│   ├── 📄 analysisUtils.js
│   └── 📄 formatters.js
├── 📂 constants.js
└── 📂 components/
    ├── 📂 SoilDataForm/           # 土壤数据表单组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 SoilDataTable/          # 土壤数据表格组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 SoilMap/                # 土壤地图组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 SoilChart/              # 土壤图表组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 NutrientAnalysis/       # 养分分析组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 PhAnalysis/             # pH值分析组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    └── 📄 TextureAnalysis/        # 质地分析组件
        ├── 📄 index.jsx
        ├── 📄 index.css
        └── 📄 types.ts
```

### 3.2 分层采样分析 (LayerSampling)

```
pages/LandInformation/Analysis/LayerSampling/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│   ├── 📄 usePageData.js
│   ├── 📄 usePageActions.js
│   ├── 📄 useSampling.js
│   └── 📄 useLayerAnalysis.js
├── 📂 utils/
│   ├── 📄 pageHelpers.js
│   ├── 📄 samplingUtils.js
│   ├── 📄 layerUtils.js
│   └── 📄 statisticsUtils.js
├── 📂 constants.js
└── 📂 components/
    ├── 📂 SamplingPlan/           # 采样计划组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 SamplingPoints/         # 采样点组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📂 LayerDataForm/          # 分层数据表单
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 LayerProfile/           # 土层剖面组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 LayerComparison/        # 土层对比组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 SamplingReport/         # 采样报告组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    └── 📄 LayerStatistics/        # 土层统计组件
        ├── 📄 index.jsx
        ├── 📄 index.css
        └── 📄 types.ts
```

### 3.3 土壤质量评价 (SoilQuality)

```
pages/LandInformation/Analysis/SoilQuality/
├── 📄 index.jsx
├── 📄 index.css
├── 📄 index.types.ts
├── 📂 hooks/
│   ├── 📄 usePageData.js
│   ├── 📄 usePageActions.js
│   ├── 📄 useQualityEvaluation.js
│   └── 📄 useQualityModels.js
├── 📂 utils/
│   ├── 📄 pageHelpers.js
│   ├── 📄 qualityUtils.js
│   ├── 📄 evaluationUtils.js
│   └── 📄 indicatorUtils.js
├── 📂 constants.js
└── 📂 components/
    ├── 📂 QualityIndicators/      # 质量指标组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 EvaluationModel/        # 评价模型组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 QualityScore/           # 质量评分组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 QualityMap/             # 质量地图组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 QualityTrend/           # 质量趋势组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    ├── 📄 ImprovementSuggestions/ # 改进建议组件
    │   ├── 📄 index.jsx
    │   ├── 📄 index.css
    │   └── 📄 types.ts
    └── 📄 QualityReport/          # 质量报告组件
        ├── 📄 index.jsx
        ├── 📄 index.css
        └── 📄 types.ts
```

## 4. 主要类型定义示例

### 4.1 地块基础类型 (FieldEntryMaintenance/index.types.ts)

```typescript
export interface FieldRecord {
  id: string;
  name: string;
  code: string;
  area: number;
  areaUnit: AreaUnit;
  coordinates: Coordinate[];
  soilType: SoilType;
  landUse: LandUseType;
  status: FieldStatus;
  owner: string;
  description?: string;
  createdAt: string;
  updatedAt: string;
  // ... 其他字段
}

export type AreaUnit = 'mu' | 'hectare' | 'square_meter';
export type SoilType = 'sandy' | 'clay' | 'loam' | 'silt';
export type LandUseType = 'cultivated' | 'forest' | 'grassland' | 'water';
export type FieldStatus = 'active' | 'inactive' | 'leased' | 'reserved';

export interface Coordinate {
  longitude: number;
  latitude: number;
  altitude?: number;
}

export interface SoilInfo {
  ph: number;
  organicMatter: number;
  nitrogen: number;
  phosphorus: number;
  potassium: number;
  texture: string;
  drainage: DrainageType;
}

export type DrainageType = 'good' | 'moderate' | 'poor';

export interface FieldFilters {
  name?: string;
  code?: string;
  soilType?: SoilType;
  landUse?: LandUseType;
  status?: FieldStatus;
  owner?: string;
  areaRange?: [number, number];
}
```

### 4.2 空间分析类型 (FieldSpatialQuery/index.types.ts)

```typescript
export interface SpatialQuery {
  id: string;
  name: string;
  type: QueryType;
  geometry: Geometry;
  attributes?: AttributeQuery[];
  layers: string[];
  createdAt: string;
}

export type QueryType = 'point' | 'line' | 'polygon' | 'buffer' | 'intersection' | 'union';

export interface Geometry {
  type: 'Point' | 'LineString' | 'Polygon';
  coordinates: number[] | number[][] | number[][][];
}

export interface AttributeQuery {
  field: string;
  operator: '=' | '!=' | '>' | '<' | '>=' | '<=' | 'like' | 'in';
  value: any;
  logicalOperator?: 'AND' | 'OR';
}

export interface QueryResult {
  id: string;
  queryId: string;
  features: Feature[];
  totalCount: number;
  executionTime: number;
  createdAt: string;
}

export interface Feature {
  id: string;
  geometry: Geometry;
  properties: Record<string, any>;
  layerName: string;
}

export interface DataLayer {
  id: string;
  name: string;
  type: LayerType;
  url?: string;
  visible: boolean;
  opacity: number;
  style: LayerStyle;
  metadata: LayerMetadata;
}

export type LayerType = 'vector' | 'raster' | 'wms' | 'wmts' | 'xyz';

export interface LayerStyle {
  fillColor?: string;
  strokeColor?: string;
  strokeWidth?: number;
  fillOpacity?: number;
  strokeOpacity?: number;
}

export interface LayerMetadata {
  description?: string;
  source?: string;
  crs?: string;
  fields?: FieldInfo[];
  createdAt?: string;
  updatedAt?: string;
}

export interface FieldInfo {
  name: string;
  type: 'string' | 'number' | 'date' | 'boolean';
  description?: string;
}
```

这个结构为 LandInformation 模块提供了完整的页面组织架构，每个页面都包含主组件、样式文件、类型定义、专用Hooks、工具函数和拆分后的子组件，严格遵循了开发规范。