diff --git a/crop-x/src/app/(app)/land-information/archive/entry/page.tsx b/crop-x/src/app/(app)/land-information/archive/entry/page.tsx
deleted file mode 100644
index ebbda94..0000000
--- a/crop-x/src/app/(app)/land-information/archive/entry/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-
-import { Card } from '@/components/ui/card';
-
-export default function EntryPage() {
-  return (
-    <div className="space-y-6">
-      <Card className="p-6">
-        <h2 className="text-xl font-semibold">地块录入维护</h2>
-        <div className="p-3 bg-muted rounded-lg mt-3">
-          <p className="text-sm">
-            <strong>页面路径：</strong> /land-information/archive/entry
-          </p>
-        </div>
-      </Card>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/archive/manage/components/LandAttachments.tsx b/crop-x/src/app/(app)/land-information/archive/manage/components/LandAttachments.tsx
new file mode 100644
index 0000000..3e5024f
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/archive/manage/components/LandAttachments.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+
+export function LandAttachments() {
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium mb-2">地块照片</label>
+        <div className="mt-2 border-2 border-dashed rounded-lg p-6 text-center hover:border-green-500 transition-colors cursor-pointer">
+          <div className="flex flex-col items-center">
+            <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3">
+              <span className="text-gray-400">📷</span>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              点击上传或拖拽照片到此处
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              支持 JPG、PNG 格式，最大 5MB
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t pt-4">
+        <label className="block text-sm font-medium mb-2">合同文档</label>
+        <div className="mt-2 space-y-2">
+          <div className="border-2 border-dashed rounded-lg p-4 text-center hover:border-green-500 transition-colors cursor-pointer">
+            <div className="flex flex-col items-center">
+              <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mb-2">
+                <span className="text-gray-400">📄</span>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                上传合同扫描件
+              </p>
+              <p className="text-xs text-muted-foreground mt-1">
+                支持 PDF、图片格式
+              </p>
+            </div>
+          </div>
+
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+            <p className="text-xs text-blue-800">
+              💡 建议上传：承包合同、确权证书、地块测绘报告等相关文档
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/archive/manage/components/LandAttributes.tsx b/crop-x/src/app/(app)/land-information/archive/manage/components/LandAttributes.tsx
new file mode 100644
index 0000000..1aad89a
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/archive/manage/components/LandAttributes.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Plus, X } from 'lucide-react';
+import { Land } from '@/app/(app)/land-information/archive/manage/page';
+import { toast } from 'sonner';
+
+interface LandAttributesProps {
+  formData: Partial<Land>;
+  onChange: (data: Partial<Land>) => void;
+}
+
+export function LandAttributes({ formData, onChange }: LandAttributesProps) {
+  const [tagInput, setTagInput] = useState('');
+
+  const handleFieldChange = (field: keyof Land, value: any) => {
+    onChange({ ...formData, [field]: value });
+  };
+
+  // 添加标签
+  const handleAddTag = () => {
+    if (tagInput.trim() && !formData.tags?.includes(tagInput.trim())) {
+      handleFieldChange('tags', [...(formData.tags || []), tagInput.trim()]);
+      setTagInput('');
+      toast.success('标签已添加');
+    }
+  };
+
+  // 删除标签
+  const handleRemoveTag = (tag: string) => {
+    handleFieldChange('tags', formData.tags?.filter(t => t !== tag) || []);
+  };
+
+  // Enter键添加标签
+  const handleTagKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddTag();
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium mb-2">土壤类型</label>
+        <Select
+          value={formData.soilType}
+          onValueChange={(value) => handleFieldChange('soilType', value)}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="loam">壤土</SelectItem>
+            <SelectItem value="sand">沙土</SelectItem>
+            <SelectItem value="clay">黏土</SelectItem>
+            <SelectItem value="silt">粉土</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium mb-2">土地利用类型</label>
+        <Select
+          value={formData.landUseType || ''}
+          onValueChange={(value) => handleFieldChange('landUseType', value)}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="farmland">耕地</SelectItem>
+            <SelectItem value="garden">园地</SelectItem>
+            <SelectItem value="forestland">林地</SelectItem>
+            <SelectItem value="grassland">草地</SelectItem>
+            <SelectItem value="other">其他</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium mb-2">种植模式</label>
+        <Select
+          value={formData.plantingMode || ''}
+          onValueChange={(value) => handleFieldChange('plantingMode', value)}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="open-field">🌾 露地</SelectItem>
+            <SelectItem value="greenhouse">🏠 大棚</SelectItem>
+            <SelectItem value="orchard">🍎 果园</SelectItem>
+            <SelectItem value="paddy">🌊 水田</SelectItem>
+            <SelectItem value="dryland">🌵 旱地</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="border-t pt-4">
+        <label className="block text-sm font-medium mb-2">地块标签</label>
+        <div className="flex gap-2 mb-3">
+          <Input
+            value={tagInput}
+            onChange={(e) => setTagInput(e.target.value)}
+            placeholder="输入标签"
+            onKeyPress={handleTagKeyPress}
+            className="flex-1"
+          />
+          <Button size="sm" onClick={handleAddTag}>
+            <Plus className="w-4 h-4" />
+          </Button>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {formData.tags?.map((tag) => (
+            <Badge key={tag} variant="secondary" className="gap-1">
+              {tag}
+              <X
+                className="w-3 h-3 cursor-pointer hover:text-red-500"
+                onClick={() => handleRemoveTag(tag)}
+              />
+            </Badge>
+          ))}
+          {(!formData.tags || formData.tags.length === 0) && (
+            <span className="text-sm text-muted-foreground">暂无标签，点击上方添加</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/archive/manage/components/LandBasicInfo.tsx b/crop-x/src/app/(app)/land-information/archive/manage/components/LandBasicInfo.tsx
new file mode 100644
index 0000000..afcd90f
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/archive/manage/components/LandBasicInfo.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Land } from '@/app/(app)/land-information/archive/manage/page';
+
+interface LandBasicInfoProps {
+  formData: Partial<Land>;
+  onChange: (data: Partial<Land>) => void;
+  isEdit?: boolean;
+}
+
+export function LandBasicInfo({ formData, onChange, isEdit = false }: LandBasicInfoProps) {
+  const handleFieldChange = (field: keyof Land, value: any) => {
+    onChange({ ...formData, [field]: value });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium mb-2">地块编号</label>
+          <Input
+            value={formData.code || ''}
+            onChange={(e) => handleFieldChange('code', e.target.value)}
+            placeholder="系统自动生成"
+            disabled={isEdit}
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">地块名称 *</label>
+          <Input
+            value={formData.name || ''}
+            onChange={(e) => handleFieldChange('name', e.target.value)}
+            placeholder="如：东大田1号地"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">所在位置 *</label>
+          <Input
+            value={formData.location || ''}
+            onChange={(e) => handleFieldChange('location', e.target.value)}
+            placeholder="如：江苏省南京市浦口区"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">面积(亩)</label>
+          <Input
+            type="number"
+            step="0.1"
+            value={formData.area || ''}
+            onChange={(e) => handleFieldChange('area', parseFloat(e.target.value) || 0)}
+            placeholder="请输入面积"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">周长(米)</label>
+          <Input
+            type="number"
+            step="0.1"
+            value={formData.perimeter || ''}
+            onChange={(e) => handleFieldChange('perimeter', parseFloat(e.target.value) || 0)}
+            placeholder="请输入周长"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">地块状态</label>
+          <Select
+            value={formData.status}
+            onValueChange={(value) => handleFieldChange('status', value)}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="active">使用中</SelectItem>
+              <SelectItem value="maintenance">维护中</SelectItem>
+              <SelectItem value="inactive">停用</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium mb-2">备注说明</label>
+        <Textarea
+          value={formData.remarks || ''}
+          onChange={(e) => handleFieldChange('remarks', e.target.value)}
+          placeholder="其他说明信息"
+          rows={3}
+        />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/archive/manage/components/LandMapContainer.tsx b/crop-x/src/app/(app)/land-information/archive/manage/components/LandMapContainer.tsx
new file mode 100644
index 0000000..52e7c68
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/archive/manage/components/LandMapContainer.tsx
@@ -0,0 +1,255 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Map,
+  Upload,
+  Pen,
+  Square,
+  Layers,
+  CheckCircle2,
+  FileType,
+  MapPin
+} from 'lucide-react';
+import { GeoCoordinate } from '@/app/(app)/land-information/archive/manage/page';
+import { toast } from 'sonner';
+
+interface LandMapContainerProps {
+  coordinates: GeoCoordinate[];
+  area: number;
+  perimeter: number;
+  onCoordinatesChange: (coordinates: GeoCoordinate[], area: number, perimeter: number) => void;
+}
+
+export function LandMapContainer({
+  coordinates,
+  area,
+  perimeter,
+  onCoordinatesChange
+}: LandMapContainerProps) {
+  const [isMapLoaded, setIsMapLoaded] = useState(false);
+  const [mapLayerType, setMapLayerType] = useState<'satellite' | 'street'>('satellite');
+  const [drawMode, setDrawMode] = useState<'none' | 'polygon' | 'rectangle'>('none');
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+
+  // 初始化地图
+  useEffect(() => {
+    // 模拟地图加载
+    setTimeout(() => {
+      setIsMapLoaded(true);
+      toast.info('演示地图模式：可通过文件导入或手动输入坐标数据', { duration: 3000 });
+    }, 1000);
+  }, []);
+
+  // 切换地图图层
+  const toggleMapLayer = () => {
+    const newLayerType = mapLayerType === 'satellite' ? 'street' : 'satellite';
+    setMapLayerType(newLayerType);
+    toast.success(`已切换到${newLayerType === 'satellite' ? '卫星图' : '电子地图'}`);
+  };
+
+  // 开始绘制
+  const startDrawing = (mode: 'polygon' | 'rectangle') => {
+    setDrawMode(mode);
+    toast.info(`开始绘制${mode === 'polygon' ? '多边形' : '矩形'}，点击地图描点，双击结束`);
+
+    // 模拟绘制完成
+    setTimeout(() => {
+      const mockCoordinates = [
+        { lat: 39.9042 + 0.01, lng: 116.4074 - 0.01 },
+        { lat: 39.9042 + 0.01, lng: 116.4074 + 0.01 },
+        { lat: 39.9042 - 0.01, lng: 116.4074 + 0.01 },
+        { lat: 39.9042 - 0.01, lng: 116.4074 - 0.01 },
+      ];
+
+      const mockArea = 120.5;
+      const mockPerimeter = 1380;
+
+      onCoordinatesChange(mockCoordinates, mockArea, mockPerimeter);
+      setDrawMode('none');
+
+      toast.success(`绘制完成！面积：${mockArea.toFixed(2)}亩，周长：${mockPerimeter.toFixed(0)}米`);
+    }, 2000);
+  };
+
+  // 文件导入
+  const handleFileImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const fileExtension = file.name.split('.').pop()?.toLowerCase();
+
+    if (!['kml', 'geojson', 'json', 'shp'].includes(fileExtension || '')) {
+      toast.error('不支持的文件格式。请上传 KML、GeoJSON 或 SHP 文件');
+      return;
+    }
+
+    try {
+      // 模拟文件解析
+      const mockCoordinates = [
+        { lat: 39.9042 + 0.008, lng: 116.4074 - 0.008 },
+        { lat: 39.9042 + 0.008, lng: 116.4074 + 0.008 },
+        { lat: 39.9042 - 0.008, lng: 116.4074 + 0.008 },
+        { lat: 39.9042 - 0.008, lng: 116.4074 - 0.008 },
+      ];
+
+      const mockArea = 85.3;
+      const mockPerimeter = 1120;
+
+      onCoordinatesChange(mockCoordinates, mockArea, mockPerimeter);
+
+      toast.success(`成功导入${fileExtension.toUpperCase()}文件！面积：${mockArea.toFixed(2)}亩，${mockCoordinates.length}个点`);
+    } catch (error) {
+      console.error('文件导入错误:', error);
+      toast.error('文件导入失败，请检查文件格式');
+    }
+
+    // 清空input
+    event.target.value = '';
+  };
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-4">
+        {/* 地图工具栏 */}
+        <div className="flex items-center justify-between">
+          <h3 className="flex items-center gap-2">
+            <Map className="w-5 h-5 text-green-600" />
+            地块边界绘制
+          </h3>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={toggleMapLayer}
+            >
+              <Layers className="w-4 h-4 mr-2" />
+              {mapLayerType === 'satellite' ? '卫星图' : '电子地图'}
+            </Button>
+            <Button
+              variant={drawMode === 'polygon' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => startDrawing('polygon')}
+            >
+              <Pen className="w-4 h-4 mr-2" />
+              多边形
+            </Button>
+            <Button
+              variant={drawMode === 'rectangle' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => startDrawing('rectangle')}
+            >
+              <Square className="w-4 h-4 mr-2" />
+              矩形
+            </Button>
+            <div className="relative">
+              <Input
+                type="file"
+                accept=".kml,.geojson,.json,.shp"
+                onChange={handleFileImport}
+                className="absolute inset-0 opacity-0 cursor-pointer"
+              />
+              <Button
+                variant="outline"
+                size="sm"
+                className="bg-green-50 hover:bg-green-100 border-green-300"
+              >
+                <Upload className="w-4 h-4 mr-2 text-green-600" />
+                <span className="text-green-700">导入文件</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* 地图容器 */}
+        <div
+          ref={mapContainerRef}
+          className="w-full h-[500px] rounded-lg border-2 border-dashed relative bg-gradient-to-br from-green-50 to-blue-50"
+        >
+          {isMapLoaded && (
+            <div className="absolute inset-0 flex items-center justify-center p-8">
+              <div className="text-center max-w-md">
+                <Map className="w-16 h-16 mx-auto mb-4 text-green-600 opacity-50" />
+                <h3 className="text-green-800 mb-2">演示地图模式</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  系统提供完整功能，您可以使用：
+                </p>
+                <ul className="text-sm text-left text-muted-foreground space-y-2">
+                  <li className="flex items-start gap-2">
+                    <CheckCircle2 className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
+                    <span>导入 KML/GeoJSON/SHP 文件</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <CheckCircle2 className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
+                    <span>手动绘制多边形或矩形边界</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <CheckCircle2 className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
+                    <span>自动计算面积、周长和中心点</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <CheckCircle2 className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
+                    <span>卫星图和电子地图切换</span>
+                  </li>
+                </ul>
+                <div className="mt-4 p-3 bg-blue-50 rounded-md">
+                  <p className="text-xs text-blue-800">
+                    💡 如需启用真实地图，请配置地图SDK
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+          {!isMapLoaded && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center">
+                <MapPin className="w-12 h-12 mx-auto mb-3 text-green-600 animate-pulse" />
+                <p className="text-sm text-muted-foreground">初始化中...</p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 地图信息 */}
+        {coordinates && coordinates.length > 0 && (
+          <Alert>
+            <CheckCircle2 className="w-4 h-4 text-green-600" />
+            <AlertDescription>
+              <div className="grid grid-cols-3 gap-4 text-sm">
+                <div>
+                  <span className="text-muted-foreground">边界点数：</span>
+                  <span className="ml-2 font-medium">{coordinates.length} 个</span>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">面积：</span>
+                  <span className="ml-2 font-medium text-green-600">{area.toFixed(2)} 亩</span>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">周长：</span>
+                  <span className="ml-2 font-medium">{perimeter.toFixed(0)} 米</span>
+                </div>
+              </div>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {/* 文件格式说明 */}
+        <Alert className="bg-blue-50 border-blue-200">
+          <FileType className="w-4 h-4 text-blue-600" />
+          <AlertDescription className="text-sm text-blue-800">
+            <strong>支持的文件格式：</strong>
+            <ul className="mt-2 space-y-1 ml-4 list-disc">
+              <li>KML - Google Earth 标准格式</li>
+              <li>GeoJSON - Web GIS 标准格式</li>
+              <li>SHP - ArcGIS Shapefile 格式</li>
+            </ul>
+          </AlertDescription>
+        </Alert>
+      </div>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/archive/manage/components/LandOwnershipInfo.tsx b/crop-x/src/app/(app)/land-information/archive/manage/components/LandOwnershipInfo.tsx
new file mode 100644
index 0000000..48cdc08
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/archive/manage/components/LandOwnershipInfo.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { Land } from '@/app/(app)/land-information/archive/manage/page';
+
+interface LandOwnershipInfoProps {
+  formData: Partial<Land>;
+  onChange: (data: Partial<Land>) => void;
+}
+
+export function LandOwnershipInfo({ formData, onChange }: LandOwnershipInfoProps) {
+  const handleFieldChange = (field: keyof Land, value: any) => {
+    onChange({ ...formData, [field]: value });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium mb-2">权属人 *</label>
+          <Input
+            value={formData.owner || ''}
+            onChange={(e) => handleFieldChange('owner', e.target.value)}
+            placeholder="姓名"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">联系电话</label>
+          <Input
+            type="tel"
+            value={formData.ownerPhone || ''}
+            onChange={(e) => handleFieldChange('ownerPhone', e.target.value)}
+            placeholder="手机号码"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">确权证号</label>
+          <Input
+            value={formData.certificateNumber || ''}
+            onChange={(e) => handleFieldChange('certificateNumber', e.target.value)}
+            placeholder="土地确权证书编号"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">承包期限（年）</label>
+          <Input
+            type="number"
+            value={formData.contractPeriod || ''}
+            onChange={(e) => handleFieldChange('contractPeriod', Number(e.target.value))}
+            placeholder="如：30"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">承包开始</label>
+          <Input
+            type="date"
+            value={formData.contractStartDate || ''}
+            onChange={(e) => handleFieldChange('contractStartDate', e.target.value)}
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">承包结束</label>
+          <Input
+            type="date"
+            value={formData.contractEndDate || ''}
+            onChange={(e) => handleFieldChange('contractEndDate', e.target.value)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/archive/manage/components/LandVersionHistory.tsx b/crop-x/src/app/(app)/land-information/archive/manage/components/LandVersionHistory.tsx
new file mode 100644
index 0000000..3f2b394
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/archive/manage/components/LandVersionHistory.tsx
@@ -0,0 +1,513 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card } from '@/components/ui/card';
+import {
+  History,
+  MapPin,
+  FileText,
+  Clock,
+  User,
+  RotateCcw,
+  Eye,
+  GitBranch,
+  ChevronRight,
+  CheckCircle2
+} from 'lucide-react';
+import { Land } from '../page';
+import { toast } from 'sonner';
+
+// 地块版本历史接口
+interface LandVersion {
+  id: string;
+  landId: string;
+  version: number;
+  changeType: 'create' | 'update-boundary' | 'update-attributes' | 'merge' | 'split';
+  changes: LandVersionChange[];
+  coordinates?: { lat: number; lng: number }[]; // 历史边界
+  attributes?: Partial<Land>; // 历史属性
+  changedBy: string;
+  changedAt: string;
+  remarks?: string;
+}
+
+// 版本变更详情
+interface LandVersionChange {
+  field: string; // 字段名
+  oldValue: any;
+  newValue: any;
+}
+
+interface LandVersionHistoryProps {
+  land: Land;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onRestore?: (version: LandVersion) => void;
+}
+
+export function LandVersionHistory({ land, open, onOpenChange, onRestore }: LandVersionHistoryProps) {
+  const [versions, setVersions] = useState<LandVersion[]>([]);
+  const [selectedVersion, setSelectedVersion] = useState<LandVersion | null>(null);
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
+
+  useEffect(() => {
+    if (open && land) {
+      loadVersions();
+    }
+  }, [open, land]);
+
+  const loadVersions = () => {
+    try {
+      const key = `land_versions_${land.id}`;
+      const data = localStorage.getItem(key);
+      if (data) {
+        const versionList = JSON.parse(data) as LandVersion[];
+        // 按版本号降序排列
+        setVersions(versionList.sort((a, b) => b.version - a.version));
+      } else {
+        // 生成示例版本数据
+        const sampleVersions: LandVersion[] = [
+          {
+            id: `version_${land.id}_1`,
+            landId: land.id,
+            version: 3,
+            changeType: 'update-attributes',
+            changes: [
+              { field: 'tags', oldValue: ['有机种植'], newValue: ['有机种植', '高产示范'] },
+              { field: 'soilType', oldValue: 'clay', newValue: 'loam' }
+            ],
+            coordinates: land.coordinates,
+            attributes: land,
+            changedBy: '张管理员',
+            changedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+            remarks: '更新标签和土壤类型信息'
+          },
+          {
+            id: `version_${land.id}_2`,
+            landId: land.id,
+            version: 2,
+            changeType: 'update-boundary',
+            changes: [
+              { field: 'coordinates', oldValue: '4个边界点', newValue: '5个边界点' },
+              { field: 'area', oldValue: 118.5, newValue: 120.5 }
+            ],
+            coordinates: land.coordinates,
+            attributes: land,
+            changedBy: '李测量员',
+            changedAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(),
+            remarks: '重新测量地块边界'
+          },
+          {
+            id: `version_${land.id}_3`,
+            landId: land.id,
+            version: 1,
+            changeType: 'create',
+            changes: [
+              { field: 'name', oldValue: null, newValue: land.name },
+              { field: 'code', oldValue: null, newValue: land.code },
+              { field: 'area', oldValue: null, newValue: land.area },
+              { field: 'location', oldValue: null, newValue: land.location }
+            ],
+            coordinates: land.coordinates,
+            attributes: land,
+            changedBy: '王录入员',
+            changedAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
+            remarks: '创建地块基础信息'
+          }
+        ];
+        setVersions(sampleVersions);
+      }
+    } catch (error) {
+      console.error('加载版本历史失败:', error);
+      toast.error('加载版本历史失败');
+    }
+  };
+
+  const getChangeTypeLabel = (type: LandVersion['changeType']) => {
+    const labels = {
+      'create': '创建',
+      'update-boundary': '边界更新',
+      'update-attributes': '属性更新',
+      'merge': '合并',
+      'split': '分割',
+    };
+    return labels[type];
+  };
+
+  const getChangeTypeBadge = (type: LandVersion['changeType']) => {
+    const colors = {
+      'create': 'bg-green-100 text-green-700',
+      'update-boundary': 'bg-blue-100 text-blue-700',
+      'update-attributes': 'bg-purple-100 text-purple-700',
+      'merge': 'bg-orange-100 text-orange-700',
+      'split': 'bg-pink-100 text-pink-700',
+    };
+    return colors[type];
+  };
+
+  const getFieldLabel = (field: string) => {
+    const labels: Record<string, string> = {
+      name: '地块名称',
+      code: '地块编号',
+      area: '面积',
+      perimeter: '周长',
+      location: '位置',
+      soilType: '土壤类型',
+      landUseType: '土地利用类型',
+      plantingMode: '种植模式',
+      owner: '权属人',
+      ownerPhone: '联系电话',
+      contractPeriod: '承包期限',
+      contractStartDate: '承包开始',
+      contractEndDate: '承包结束',
+      certificateNumber: '确权证号',
+      tags: '标签',
+      status: '状态',
+      coordinates: '边界坐标',
+    };
+    return labels[field] || field;
+  };
+
+  const formatValue = (field: string, value: any) => {
+    if (value === null || value === undefined) return '-';
+
+    if (field === 'soilType') {
+      const labels: Record<string, string> = {
+        loam: '壤土',
+        sand: '沙土',
+        clay: '黏土',
+        silt: '粉土',
+        other: '其他',
+      };
+      return labels[value] || value;
+    }
+
+    if (field === 'landUseType') {
+      const labels: Record<string, string> = {
+        farmland: '耕地',
+        garden: '园地',
+        forestland: '林地',
+        grassland: '草地',
+        other: '其他',
+      };
+      return labels[value] || value;
+    }
+
+    if (field === 'plantingMode') {
+      const labels: Record<string, string> = {
+        'open-field': '露地',
+        'greenhouse': '大棚',
+        'orchard': '果园',
+        'paddy': '水田',
+        'dryland': '旱地',
+      };
+      return labels[value] || value;
+    }
+
+    if (field === 'status') {
+      return value === 'active' ? '正常' : '待确认';
+    }
+
+    if (field === 'area') {
+      return `${value} 亩`;
+    }
+
+    if (field === 'perimeter') {
+      return `${value} 米`;
+    }
+
+    if (field === 'contractPeriod') {
+      return `${value} 年`;
+    }
+
+    if (field === 'tags' && Array.isArray(value)) {
+      return value.join(', ');
+    }
+
+    if (field === 'coordinates' && Array.isArray(value)) {
+      return `${value.length} 个点`;
+    }
+
+    return value;
+  };
+
+  const handleViewDetail = (version: LandVersion) => {
+    setSelectedVersion(version);
+    setShowDetailDialog(true);
+  };
+
+  const handleRestore = (version: LandVersion) => {
+    if (window.confirm(`确定要恢复到版本 ${version.version} 吗？这将创建一个新版本。`)) {
+      onRestore?.(version);
+      toast.success('版本已恢复');
+      onOpenChange(false);
+    }
+  };
+
+  const isCurrentVersion = (version: LandVersion) => {
+    return version.version === 3; // 假设当前版本是3
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <History className="w-5 h-5 text-green-600" />
+              版本历史 - {land.name}
+            </DialogTitle>
+            <DialogDescription className="sr-only">
+              查看地块的历史版本和变更记录
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {versions.length === 0 ? (
+              <div className="text-center py-12 text-muted-foreground">
+                <History className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                <p>暂无版本历史</p>
+              </div>
+            ) : (
+              <div className="relative">
+                {/* 时间线 */}
+                <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-200" />
+
+                <div className="space-y-6">
+                  {versions.map((version, index) => (
+                    <div key={version.id} className="relative pl-16">
+                      {/* 时间线节点 */}
+                      <div className={`absolute left-6 w-5 h-5 rounded-full border-4 border-white ${
+                        isCurrentVersion(version)
+                          ? 'bg-green-600'
+                          : 'bg-gray-400'
+                      }`} />
+
+                      <Card className={`p-4 ${isCurrentVersion(version) ? 'border-green-600 border-2' : ''}`}>
+                        <div className="flex items-start justify-between mb-3">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-2">
+                              <Badge className={getChangeTypeBadge(version.changeType)}>
+                                {getChangeTypeLabel(version.changeType)}
+                              </Badge>
+                              <span className="text-sm text-muted-foreground">
+                                版本 {version.version}
+                              </span>
+                              {isCurrentVersion(version) && (
+                                <Badge className="bg-green-600">
+                                  <CheckCircle2 className="w-3 h-3 mr-1" />
+                                  当前版本
+                                </Badge>
+                              )}
+                            </div>
+
+                            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                              <div className="flex items-center gap-1">
+                                <Clock className="w-4 h-4" />
+                                {new Date(version.changedAt).toLocaleString('zh-CN')}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <User className="w-4 h-4" />
+                                {version.changedBy}
+                              </div>
+                            </div>
+
+                            {version.remarks && (
+                              <p className="mt-2 text-sm text-muted-foreground">
+                                {version.remarks}
+                              </p>
+                            )}
+                          </div>
+
+                          <div className="flex gap-2">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => handleViewDetail(version)}
+                            >
+                              <Eye className="w-4 h-4 mr-1" />
+                              详情
+                            </Button>
+                            {!isCurrentVersion(version) && (
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={() => handleRestore(version)}
+                              >
+                                <RotateCcw className="w-4 h-4 mr-1" />
+                                恢复
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* 变更摘要 */}
+                        {version.changes.length > 0 && (
+                          <div className="mt-3 pt-3 border-t">
+                            <div className="text-sm space-y-1">
+                              {version.changes.slice(0, 3).map((change, idx) => (
+                                <div key={idx} className="flex items-center gap-2 text-muted-foreground">
+                                  <ChevronRight className="w-4 h-4" />
+                                  <span>{getFieldLabel(change.field)}:</span>
+                                  <span className="line-through opacity-60">
+                                    {formatValue(change.field, change.oldValue)}
+                                  </span>
+                                  <span>→</span>
+                                  <span className="text-foreground">
+                                    {formatValue(change.field, change.newValue)}
+                                  </span>
+                                </div>
+                              ))}
+                              {version.changes.length > 3 && (
+                                <div className="text-xs text-muted-foreground">
+                                  还有 {version.changes.length - 3} 项变更...
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </Card>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              关闭
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 版本详情对话框 */}
+      {selectedVersion && (
+        <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
+          <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <FileText className="w-5 h-5 text-green-600" />
+                版本详情 - 版本 {selectedVersion.version}
+              </DialogTitle>
+              <DialogDescription className="sr-only">
+                查看版本的详细变更信息
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-6">
+              {/* 版本基本信息 */}
+              <Card className="p-4 bg-gray-50">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Label>变更类型</Label>
+                    <div className="mt-2">
+                      <Badge className={getChangeTypeBadge(selectedVersion.changeType)}>
+                        {getChangeTypeLabel(selectedVersion.changeType)}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div>
+                    <Label>版本号</Label>
+                    <div className="mt-2">版本 {selectedVersion.version}</div>
+                  </div>
+                  <div>
+                    <Label>变更时间</Label>
+                    <div className="mt-2">
+                      {new Date(selectedVersion.changedAt).toLocaleString('zh-CN')}
+                    </div>
+                  </div>
+                  <div>
+                    <Label>变更人</Label>
+                    <div className="mt-2">{selectedVersion.changedBy}</div>
+                  </div>
+                  {selectedVersion.remarks && (
+                    <div className="col-span-2">
+                      <Label>备注</Label>
+                      <div className="mt-2">{selectedVersion.remarks}</div>
+                    </div>
+                  )}
+                </div>
+              </Card>
+
+              {/* 变更详情 */}
+              <div>
+                <h4 className="mb-3 flex items-center gap-2">
+                  <GitBranch className="w-4 h-4" />
+                  变更详情
+                </h4>
+                <div className="space-y-2">
+                  {selectedVersion.changes.map((change, idx) => (
+                    <Card key={idx} className="p-3">
+                      <div className="flex items-start gap-4">
+                        <div className="flex-1">
+                          <div className="text-sm mb-2">
+                            <Badge variant="outline">{getFieldLabel(change.field)}</Badge>
+                          </div>
+                          <div className="grid grid-cols-2 gap-4 text-sm">
+                            <div>
+                              <div className="text-muted-foreground mb-1">原值</div>
+                              <div className="p-2 bg-red-50 rounded border border-red-200 line-through">
+                                {formatValue(change.field, change.oldValue)}
+                              </div>
+                            </div>
+                            <div>
+                              <div className="text-muted-foreground mb-1">新值</div>
+                              <div className="p-2 bg-green-50 rounded border border-green-200">
+                                {formatValue(change.field, change.newValue)}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {/* 边界信息 */}
+              {selectedVersion.coordinates && selectedVersion.coordinates.length > 0 && (
+                <div>
+                  <h4 className="mb-3 flex items-center gap-2">
+                    <MapPin className="w-4 h-4" />
+                    边界信息
+                  </h4>
+                  <Card className="p-4 bg-gray-50">
+                    <div className="text-sm text-muted-foreground">
+                      边界点数量: {selectedVersion.coordinates.length} 个
+                    </div>
+                  </Card>
+                </div>
+              )}
+            </div>
+
+            <DialogFooter>
+              {!isCurrentVersion(selectedVersion) && (
+                <Button onClick={() => {
+                  handleRestore(selectedVersion);
+                  setShowDetailDialog(false);
+                }}>
+                  <RotateCcw className="w-4 h-4 mr-2" />
+                  恢复此版本
+                </Button>
+              )}
+              <Button variant="outline" onClick={() => setShowDetailDialog(false)}>
+                关闭
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+}
+
+const Label = ({ children }: { children: React.ReactNode }) => (
+  <label className="text-sm text-muted-foreground">
+    {children}
+  </label>
+);
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/archive/manage/page.tsx b/crop-x/src/app/(app)/land-information/archive/manage/page.tsx
new file mode 100644
index 0000000..0bc8a7d
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/archive/manage/page.tsx
@@ -0,0 +1,1211 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Plus, Download, Search, Eye, Edit, Trash2, MapPin, History, X, Tag as TagIcon } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import { toast } from 'sonner';
+
+// Label component
+const Label = ({ children, className = '' }: { children: React.ReactNode; className?: string }) => (
+  <label className={`text-sm font-medium text-muted-foreground ${className}`}>
+    {children}
+  </label>
+);
+
+// 导入分页组件
+import { usePagination } from '@/lib/usePagination';
+import { DataPagination } from '@/components/ui/data-pagination';
+
+// 导入独立组件
+import { LandBasicInfo } from './components/LandBasicInfo';
+import { LandOwnershipInfo } from './components/LandOwnershipInfo';
+import { LandAttributes } from './components/LandAttributes';
+import { LandAttachments } from './components/LandAttachments';
+import { LandMapContainer } from './components/LandMapContainer';
+import { LandVersionHistory } from './components/LandVersionHistory';
+
+// 地块标签接口
+interface LandTag {
+  id: string;
+  name: string;
+  color: string;
+  category?: string;
+  description?: string;
+  createdAt: string;
+}
+
+interface Land {
+  id: string;
+  code: string;
+  name: string;
+  area: number;
+  location: string;
+  soilType: string;
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+  owner?: string;
+  ownerPhone?: string;
+  perimeter?: number;
+  centerPoint?: { lat: number; lng: number };
+  coordinates?: { lat: number; lng: number }[];
+  contractStartDate?: string;
+  contractEndDate?: string;
+  contractPeriod?: number;
+  certificateNumber?: string;
+  tags?: string[];
+  landUseType?: string;
+  plantingMode?: string;
+  remarks?: string;
+}
+
+export default function ManagePage() {
+  const [view, setView] = useState<'list' | 'create' | 'edit'>('list');
+  const [editingLandId, setEditingLandId] = useState<string | undefined>();
+  const [lands, setLands] = useState<Land[]>([]);
+  const [customTags, setCustomTags] = useState<LandTag[]>([]);
+
+  // 搜索和筛选
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [soilFilter, setSoilFilter] = useState('all');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  // 对话框状态
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [selectedLand, setSelectedLand] = useState<Land | null>(null);
+  const [showHistoryDialog, setShowHistoryDialog] = useState(false);
+  const [selectedLandForHistory, setSelectedLandForHistory] = useState<Land | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deletingId, setDeletingId] = useState<string>('');
+
+  // 标签管理
+  const [showTagDialog, setShowTagDialog] = useState(false);
+  const [selectedLandForTag, setSelectedLandForTag] = useState<Land | null>(null);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+  // Load data from localStorage on mount
+  useEffect(() => {
+    // 临时强制清除现有数据并生成100条测试数据
+    localStorage.removeItem('land_archive_data');
+    loadLands();
+    loadCustomTags();
+    initializeSampleData();
+    initializeSampleTags();
+  }, []);
+
+  const loadLands = () => {
+    const savedLands = JSON.parse(localStorage.getItem('land_archive_data') || '[]');
+    setLands(savedLands);
+  };
+
+  const loadCustomTags = () => {
+    const tagsData = localStorage.getItem('land_archive_custom_tags');
+    if (tagsData) {
+      setCustomTags(JSON.parse(tagsData));
+    }
+  };
+
+  // 初始化样例数据
+  const initializeSampleData = () => {
+    const existingData = localStorage.getItem('land_archive_data');
+    // 强制重新生成100条数据用于测试分页功能
+    if (!existingData || JSON.parse(existingData).length === 0 || JSON.parse(existingData).length < 100) {
+      // 生成100个示例数据
+      const sampleLands: Land[] = [];
+
+      // 数据模板
+      const districts = ['浦口区', '江宁区', '六合区', '溧水区', '高淳区', '栖霞区', '雨花台区', '秦淮区', '建邺区', '鼓楼区'];
+      const landNames = ['东区', '西区', '南区', '北区', '中央区', '示范区', '开发区', '实验区', '生态区', '产业区'];
+      const landTypes = ['耕地', '园地', '林地', '草地', '水田', '旱地', '大棚', '果园', '苗圃', '示范基地'];
+      const owners = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '陈一', '刘二', '黄三', '杨四', '朱五', '秦六', '尤七', '许八', '何九', '吕十', '施一', '张二', '孔三', '曹四', '严五', '华六', '金七', '魏八', '陶九', '姜十', '戚一', '谢二', '邹三', '喻四', '柏五', '水六', '窦七', '章八', '云九', '苏十', '潘一', '葛二', '奚三', '范四', '彭五', '鲁六', '韦七', '昌八', '马九', '苗十', '凤一', '花二', '方三', '俞四', '任五', '袁六', '柳七', '酆八', '鲍九', '唐十', '费一', '廉二', '岑三', '薛四', '雷五', '贺六', '倪七', '汤八', '滕九', '殷十', '罗一', '毕二', '郝三', '邬四', '安五', '常六', '乐七', '于八', '时九', '傅十', '皮一', '卞二', '齐三', '康四', '伍五', '余六', '元七', '卜八', '顾九', '孟十', '平一', '黄二', '和三', '穆四', '萧五', '尹六', '姚七', '邵八', '湛九', '汪十'];
+      const soilTypes = ['loam', 'sand', 'clay', 'silt'];
+      const landUseTypes = ['farmland', 'garden', 'forestland', 'grassland'];
+      const plantingModes = ['open-field', 'greenhouse', 'orchard', 'paddy', 'dryland'];
+      const statusTypes = ['active', 'maintenance'];
+      const tagOptions = ['有机种植', '高产示范', '滴灌设施', '智能监测', '生态种植', '科技示范', '节水灌溉', '绿色种植', '无公害种植', '标准化种植', '集约化种植', '机械化种植', '信息化管理', '精准农业', '循环农业'];
+
+      for (let i = 1; i <= 100; i++) {
+        const district = districts[Math.floor(Math.random() * districts.length)];
+        const landName = landNames[Math.floor(Math.random() * landNames.length)];
+        const landType = landTypes[Math.floor(Math.random() * landTypes.length)];
+        const owner = owners[i - 1];
+        const soilType = soilTypes[Math.floor(Math.random() * soilTypes.length)];
+        const landUseType = landUseTypes[Math.floor(Math.random() * landUseTypes.length)];
+        const plantingMode = plantingModes[Math.floor(Math.random() * plantingModes.length)];
+        const status = statusTypes[Math.floor(Math.random() * statusTypes.length)];
+
+        // 随机生成2-4个标签
+        const tagCount = Math.floor(Math.random() * 3) + 2;
+        const tags: string[] = [];
+        for (let j = 0; j < tagCount; j++) {
+          const tag = tagOptions[Math.floor(Math.random() * tagOptions.length)];
+          if (!tags.includes(tag)) {
+            tags.push(tag);
+          }
+        }
+
+        // 生成坐标
+        const baseLat = 32.0 + (Math.random() - 0.5) * 0.5;
+        const baseLng = 118.5 + (Math.random() - 0.5) * 0.8;
+        const coordinates = [
+          { lat: baseLat + 0.001, lng: baseLng - 0.001 },
+          { lat: baseLat + 0.001, lng: baseLng + 0.001 },
+          { lat: baseLat - 0.001, lng: baseLng + 0.001 },
+          { lat: baseLat - 0.001, lng: baseLng - 0.001 }
+        ];
+
+        const area = Number((50 + Math.random() * 200).toFixed(1));
+        const perimeter = Math.floor(800 + Math.random() * 1500);
+
+        sampleLands.push({
+          id: i.toString(),
+          code: `L2024-${i.toString().padStart(3, '0')}`,
+          name: `${landName}${landType}${i}号`,
+          area: area,
+          perimeter: perimeter,
+          location: `江苏省南京市${district}`,
+          soilType: soilType,
+          status: status,
+          owner: owner,
+          ownerPhone: `1${Math.floor(Math.random() * 9) + 1}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}`,
+          contractStartDate: `${2018 + Math.floor(Math.random() * 6)}-${(Math.floor(Math.random() * 12) + 1).toString().padStart(2, '0')}-01`,
+          contractEndDate: `${2048 + Math.floor(Math.random() * 6)}-${(Math.floor(Math.random() * 12) + 1).toString().padStart(2, '0')}-31`,
+          contractPeriod: 30,
+          certificateNumber: `CQ${2020 + Math.floor(Math.random() * 4)}-${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
+          tags: tags,
+          landUseType: landUseType,
+          plantingMode: plantingMode,
+          centerPoint: { lat: baseLat, lng: baseLng },
+          coordinates: coordinates,
+          createdAt: `2024-${(Math.floor(Math.random() * 12) + 1).toString().padStart(2, '0')}-${(Math.floor(Math.random() * 28) + 1).toString().padStart(2, '0')}T${Math.floor(Math.random() * 24).toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}:00Z`,
+          updatedAt: `2024-${(Math.floor(Math.random() * 12) + 1).toString().padStart(2, '0')}-${(Math.floor(Math.random() * 28) + 1).toString().padStart(2, '0')}T${Math.floor(Math.random() * 24).toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}:00Z`,
+          remarks: `${landType}，面积${area}亩，适合${tags.join('、')}等多种农业发展模式`
+        });
+      }
+
+      localStorage.setItem('land_archive_data', JSON.stringify(sampleLands));
+      setLands(sampleLands);
+      toast.success('已加载100条样例地块数据');
+    }
+  };
+
+  // 初始化样例标签数据
+  const initializeSampleTags = () => {
+    const existingTags = localStorage.getItem('land_archive_custom_tags');
+    if (!existingTags) {
+      const sampleTags: LandTag[] = [
+        {
+          id: 'tag_1',
+          name: '有机种植',
+          color: '#22c55e', // green-500
+          category: '种植方式',
+          description: '采用有机农业标准进行种植',
+          createdAt: new Date().toISOString()
+        },
+        {
+          id: 'tag_2',
+          name: '高产示范',
+          color: '#f59e0b', // amber-500
+          category: '产量等级',
+          description: '高产量示范地块',
+          createdAt: new Date().toISOString()
+        },
+        {
+          id: 'tag_3',
+          name: '滴灌设施',
+          color: '#3b82f6', // blue-500
+          category: '基础设施',
+          description: '配备滴灌灌溉设施',
+          createdAt: new Date().toISOString()
+        },
+        {
+          id: 'tag_4',
+          name: '智能监测',
+          color: '#8b5cf6', // violet-500
+          category: '智能化',
+          description: '配备智能监测设备',
+          createdAt: new Date().toISOString()
+        },
+        {
+          id: 'tag_5',
+          name: '生态种植',
+          color: '#10b981', // emerald-500
+          category: '种植方式',
+          description: '采用生态循环种植模式',
+          createdAt: new Date().toISOString()
+        },
+        {
+          id: 'tag_6',
+          name: '科技示范',
+          color: '#ef4444', // red-500
+          category: '示范类型',
+          description: '农业科技示范地块',
+          createdAt: new Date().toISOString()
+        },
+        {
+          id: 'tag_7',
+          name: '节水灌溉',
+          color: '#06b6d4', // cyan-500
+          category: '灌溉方式',
+          description: '采用节水灌溉技术',
+          createdAt: new Date().toISOString()
+        },
+        {
+          id: 'tag_8',
+          name: '绿色种植',
+          color: '#84cc16', // lime-500
+          category: '种植方式',
+          description: '绿色环保种植方式',
+          createdAt: new Date().toISOString()
+        }
+      ];
+
+      localStorage.setItem('land_archive_custom_tags', JSON.stringify(sampleTags));
+      setCustomTags(sampleTags);
+    }
+  };
+
+  const handleCreateNew = () => {
+    setEditingLandId(undefined);
+    setView('create');
+  };
+
+  const handleEdit = (landId: string) => {
+    setEditingLandId(landId);
+    setView('edit');
+  };
+
+  const handleSave = (land: Land) => {
+    if (editingLandId) {
+      // Update existing land
+      setLands(prev => prev.map(l => l.id === land.id ? land : l));
+      toast.success('地块更新成功');
+    } else {
+      // Create new land
+      const newLand = { ...land, id: Date.now().toString(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() };
+      setLands(prev => [...prev, newLand]);
+      toast.success('地块创建成功');
+    }
+    setView('list');
+    setEditingLandId(undefined);
+
+    // Save to localStorage
+    const updatedLands = editingLandId
+      ? lands.map(l => l.id === land.id ? land : l)
+      : [...lands, { ...land, id: Date.now().toString(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }];
+    localStorage.setItem('land_archive_data', JSON.stringify(updatedLands));
+  };
+
+  const handleCancel = () => {
+    setView('list');
+    setEditingLandId(undefined);
+  };
+
+  const handleExportData = () => {
+    const dataStr = JSON.stringify(lands, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+    const url = URL.createObjectURL(dataBlob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `地块档案数据_${new Date().toLocaleDateString()}.json`;
+    link.click();
+    URL.revokeObjectURL(url);
+    toast.success('数据导出成功');
+  };
+
+  const handleDelete = (landId: string) => {
+    setLands(prev => prev.filter(l => l.id !== landId));
+    const updatedLands = lands.filter(l => l.id !== landId);
+    localStorage.setItem('land_archive_data', JSON.stringify(updatedLands));
+    toast.success('地块删除成功');
+  };
+
+  // 查看详情
+  const handleViewDetail = (land: Land) => {
+    setSelectedLand(land);
+    setShowDetailDialog(true);
+  };
+
+  // 删除确认
+  const handleDeleteClick = (landId: string) => {
+    setDeletingId(landId);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = () => {
+    const updatedLands = lands.filter(l => l.id !== deletingId);
+    setLands(updatedLands);
+    localStorage.setItem('land_archive_data', JSON.stringify(updatedLands));
+    toast.success('地块删除成功');
+    setDeleteDialogOpen(false);
+    setDeletingId('');
+  };
+
+  // 查看历史数据
+  const handleViewHistory = (land: Land) => {
+    setSelectedLandForHistory(land);
+    setShowHistoryDialog(true);
+  };
+
+  // 打开标签管理对话框
+  const handleOpenTagDialog = (land: Land) => {
+    setSelectedLandForTag(land);
+    setSelectedTags([...(land.tags || [])]);
+    setShowTagDialog(true);
+  };
+
+  const toggleTag = (tagName: string) => {
+    if (selectedTags.includes(tagName)) {
+      setSelectedTags(selectedTags.filter(t => t !== tagName));
+    } else {
+      setSelectedTags([...selectedTags, tagName]);
+    }
+  };
+
+  // 保存标签
+  const handleSaveTags = () => {
+    if (!selectedLandForTag) return;
+
+    const updatedLands = lands.map(land =>
+      land.id === selectedLandForTag.id
+        ? { ...land, tags: selectedTags, updatedAt: new Date().toISOString() }
+        : land
+    );
+
+    setLands(updatedLands);
+    localStorage.setItem('land_archive_data', JSON.stringify(updatedLands));
+    toast.success('标签更新成功');
+    setShowTagDialog(false);
+    setSelectedLandForTag(null);
+    setSelectedTags([]);
+  };
+
+  // 筛选逻辑
+  const filteredLands = lands.filter(land => {
+    const matchKeyword = !searchKeyword ||
+      land.code?.includes(searchKeyword) ||
+      land.name.includes(searchKeyword) ||
+      land.owner?.includes(searchKeyword);
+
+    const matchSoil = soilFilter === 'all' || land.soilType === soilFilter;
+    const matchStatus = statusFilter === 'all' || land.status === statusFilter;
+
+    return matchKeyword && matchSoil && matchStatus;
+  });
+
+  // 分页
+  const pagination = usePagination(filteredLands, 10);
+
+  // 统计数据
+  const stats = {
+    total: lands.length,
+    totalArea: lands.reduce((sum, l) => sum + l.area, 0),
+    averageArea: lands.length > 0 ? lands.reduce((sum, l) => sum + l.area, 0) / lands.length : 0,
+    maxArea: lands.length > 0 ? Math.max(...lands.map(l => l.area)) : 0,
+    minArea: lands.length > 0 ? Math.min(...lands.map(l => l.area)) : 0,
+    activeCount: lands.filter(l => l.status === 'active').length,
+    maintenanceCount: lands.filter(l => l.status === 'maintenance').length,
+    inactiveCount: lands.filter(l => l.status === 'inactive').length,
+    bySoilType: lands.reduce((acc, l) => {
+      acc[l.soilType] = (acc[l.soilType] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>),
+  };
+
+  // 辅助函数
+  const getSoilTypeLabel = (type: string) => {
+    const labels: Record<string, string> = {
+      loam: '壤土',
+      sand: '沙土',
+      clay: '黏土',
+      silt: '粉土',
+    };
+    return labels[type] || type;
+  };
+
+  const getSoilTypeBadge = (type: string) => {
+    const colors: Record<string, string> = {
+      loam: 'bg-green-100 text-green-700',
+      sand: 'bg-yellow-100 text-yellow-700',
+      clay: 'bg-orange-100 text-orange-700',
+      silt: 'bg-blue-100 text-blue-700',
+    };
+    return colors[type] || 'bg-gray-100 text-gray-700';
+  };
+
+  const getStatusBadge = (status: string) => {
+    const colors: Record<string, string> = {
+      active: 'bg-green-100 text-green-700',
+      maintenance: 'bg-yellow-100 text-yellow-700',
+      inactive: 'bg-gray-100 text-gray-700',
+    };
+    return colors[status] || 'bg-gray-100 text-gray-700';
+  };
+
+  const getStatusLabel = (status: string) => {
+    const labels: Record<string, string> = {
+      active: '使用中',
+      maintenance: '维护中',
+      inactive: '停用',
+    };
+    return labels[status] || status;
+  };
+
+  const getPlantingModeLabel = (mode: string) => {
+    const labels: Record<string, string> = {
+      'open-field': '露地',
+      'greenhouse': '大棚',
+      'orchard': '果园',
+      'paddy': '水田',
+      'dryland': '旱地',
+    };
+    return labels[mode] || mode;
+  };
+
+  const getPlantingModeBadge = (mode: string) => {
+    const colors: Record<string, string> = {
+      'open-field': 'bg-blue-100 text-blue-700',
+      'greenhouse': 'bg-green-100 text-green-700',
+      'orchard': 'bg-orange-100 text-orange-700',
+      'paddy': 'bg-cyan-100 text-cyan-700',
+      'dryland': 'bg-amber-100 text-amber-700',
+    };
+    return colors[mode] || 'bg-gray-100 text-gray-700';
+  };
+
+  return (
+    <div className="space-y-6">
+      {view === 'list' ? (
+        <>
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-green-800 text-xl font-semibold">地块档案管理</h2>
+              <p className="text-muted-foreground">
+                完整的地块档案信息管理，包含录入、查询、编辑和版本历史
+              </p>
+            </div>
+            <div className="flex gap-2">
+              <Button onClick={handleCreateNew}>
+                <Plus className="w-4 h-4 mr-2" />
+                新建地块
+              </Button>
+              <Button variant="outline" onClick={handleExportData}>
+                <Download className="w-4 h-4 mr-2" />
+                导出数据
+              </Button>
+            </div>
+          </div>
+
+          {/* 统计卡片 */}
+          <div className="grid grid-cols-4 gap-4">
+            <Card className="p-4">
+              <div className="text-sm text-muted-foreground">地块总数</div>
+              <div className="mt-2 text-green-600">{stats.total} 个</div>
+            </Card>
+            <Card className="p-4">
+              <div className="text-sm text-muted-foreground">总面积</div>
+              <div className="mt-2 text-green-600">{stats.totalArea.toFixed(2)} 亩</div>
+            </Card>
+            <Card className="p-4">
+              <div className="text-sm text-muted-foreground">平均面积</div>
+              <div className="mt-2 text-green-600">{stats.averageArea.toFixed(2)} 亩</div>
+            </Card>
+            <Card className="p-4">
+              <div className="text-sm text-muted-foreground">使用中</div>
+              <div className="mt-2 text-green-600">{stats.activeCount} 个</div>
+            </Card>
+          </div>
+
+          {/* 详细统计 */}
+          <div className="grid grid-cols-2 gap-4">
+            <Card className="p-4">
+              <h3 className="font-medium mb-3">按状态统计</h3>
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-sm">使用中</span>
+                  <Badge className="bg-green-100 text-green-700">{stats.activeCount}</Badge>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm">维护中</span>
+                  <Badge className="bg-yellow-100 text-yellow-700">{stats.maintenanceCount}</Badge>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm">停用</span>
+                  <Badge className="bg-gray-100 text-gray-700">{stats.inactiveCount}</Badge>
+                </div>
+              </div>
+            </Card>
+            <Card className="p-4">
+              <h3 className="font-medium mb-3">按土壤类型统计</h3>
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-sm">壤土</span>
+                  <Badge className="bg-green-100 text-green-700">{stats.bySoilType.loam || 0}</Badge>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm">沙土</span>
+                  <Badge className="bg-yellow-100 text-yellow-700">{stats.bySoilType.sand || 0}</Badge>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm">黏土</span>
+                  <Badge className="bg-orange-100 text-orange-700">{stats.bySoilType.clay || 0}</Badge>
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          {/* 搜索和筛选 */}
+          <Card className="p-4">
+            <div className="flex gap-4">
+              <div className="flex-1">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                  <Input
+                    placeholder="搜索地块编号、名称、权属人..."
+                    value={searchKeyword}
+                    onChange={(e) => setSearchKeyword(e.target.value)}
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+              <Select value={soilFilter} onValueChange={setSoilFilter}>
+                <SelectTrigger className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部土壤</SelectItem>
+                  <SelectItem value="loam">壤土</SelectItem>
+                  <SelectItem value="sand">沙土</SelectItem>
+                  <SelectItem value="clay">黏土</SelectItem>
+                  <SelectItem value="silt">粉土</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select value={statusFilter} onValueChange={setStatusFilter}>
+                <SelectTrigger className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部状态</SelectItem>
+                  <SelectItem value="active">使用中</SelectItem>
+                  <SelectItem value="maintenance">维护中</SelectItem>
+                  <SelectItem value="inactive">停用</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </Card>
+
+          {/* 地块列表 */}
+          <Card>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>地块编号</TableHead>
+                  <TableHead>地块名称</TableHead>
+                  <TableHead>面积</TableHead>
+                  <TableHead>土壤类型</TableHead>
+                  <TableHead>种植模式</TableHead>
+                  <TableHead>权属人</TableHead>
+                  <TableHead>状态</TableHead>
+                  <TableHead>标签</TableHead>
+                  <TableHead>操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredLands.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={10} className="text-center text-muted-foreground py-8">
+                      {lands.length === 0 ? '暂无地块数据，请点击"新建地块"添加' : '没有符合筛选条件的地块'}
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  pagination.paginatedData.map((land) => (
+                    <TableRow key={land.id}>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <MapPin className="w-4 h-4 text-green-600" />
+                          <code className="text-xs bg-gray-100 px-2 py-1 rounded">
+                            {land.code}
+                          </code>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div>
+                          <div>{land.name}</div>
+                          <p className="text-xs text-muted-foreground">{land.location}</p>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-green-600">{land.area.toFixed(2)} 亩</span>
+                      </TableCell>
+                      <TableCell>
+                        <Badge className={getSoilTypeBadge(land.soilType)}>
+                          {getSoilTypeLabel(land.soilType)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge className={getPlantingModeBadge(land.plantingMode || 'open-field')}>
+                          {getPlantingModeLabel(land.plantingMode || 'open-field')}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{land.owner || '-'}</TableCell>
+                      <TableCell>
+                        <Badge className={getStatusBadge(land.status)}>
+                          {getStatusLabel(land.status)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <div className="flex flex-wrap gap-1">
+                            {land.tags && land.tags.length > 0 ? (
+                              land.tags.slice(0, 2).map((tag, index) => {
+                                const tagData = customTags.find(t => t.name === tag);
+                                return (
+                                  <Badge
+                                    key={index}
+                                    variant="outline"
+                                    className="text-xs"
+                                    style={tagData ? {
+                                      borderColor: tagData.color,
+                                      color: tagData.color
+                                    } : {}}
+                                  >
+                                    {tag}
+                                  </Badge>
+                                );
+                              })
+                            ) : (
+                              <span className="text-muted-foreground text-sm">-</span>
+                            )}
+                            {land.tags && land.tags.length > 2 && (
+                              <Badge variant="outline" className="text-xs">
+                                +{land.tags.length - 2}
+                              </Badge>
+                            )}
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0"
+                            onClick={() => handleOpenTagDialog(land)}
+                            title="管理标签"
+                          >
+                            <Plus className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                      <TableCell>{new Date(land.createdAt).toLocaleDateString()}</TableCell>
+                      <TableCell>
+                        <div className="flex gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleViewDetail(land)}
+                            title="查看详情"
+                          >
+                            <Eye className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleViewHistory(land)}
+                            title="历史数据"
+                          >
+                            <History className="w-4 h-4 text-blue-600" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleEdit(land.id)}
+                            title="编辑"
+                          >
+                            <Edit className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleDeleteClick(land.id)}
+                            title="删除"
+                          >
+                            <Trash2 className="w-4 h-4 text-destructive" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+
+            {/* 分页 */}
+            <DataPagination
+              currentPage={pagination.currentPage}
+              totalPages={pagination.totalPages}
+              pageSize={pagination.pageSize}
+              totalItems={filteredLands.length}
+              startIndex={pagination.startIndex}
+              endIndex={pagination.endIndex}
+              onPageChange={pagination.goToPage}
+              onPageSizeChange={pagination.setPageSize}
+              canPreviousPage={pagination.canPreviousPage}
+              canNextPage={pagination.canNextPage}
+              pageSizeOptions={[10, 30, 50, 100]}
+            />
+          </Card>
+
+          {/* 详情对话框 */}
+          <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
+            <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+              <DialogHeader>
+                <DialogTitle>地块详情</DialogTitle>
+                <DialogDescription className="sr-only">
+                  查看地块详细信息
+                </DialogDescription>
+              </DialogHeader>
+              {selectedLand && (
+                <div className="space-y-6">
+                  {/* 基本信息 */}
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">地块编号</label>
+                      <div className="mt-1 p-2 bg-gray-50 rounded">{selectedLand.code}</div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">地块名称</label>
+                      <div className="mt-1 p-2 bg-gray-50 rounded">{selectedLand.name}</div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">面积</label>
+                      <div className="mt-1 p-2 bg-gray-50 rounded text-green-600">
+                        {selectedLand.area.toFixed(2)} 亩
+                      </div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">周长</label>
+                      <div className="mt-1 p-2 bg-gray-50 rounded">
+                        {selectedLand.perimeter?.toFixed(0) || '-'} 米
+                      </div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">土壤类型</label>
+                      <div className="mt-2">
+                        <Badge className={getSoilTypeBadge(selectedLand.soilType)}>
+                          {getSoilTypeLabel(selectedLand.soilType)}
+                        </Badge>
+                      </div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">地块状态</label>
+                      <div className="mt-2">
+                        <Badge className={getStatusBadge(selectedLand.status)}>
+                          {getStatusLabel(selectedLand.status)}
+                        </Badge>
+                      </div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">权属人</label>
+                      <div className="mt-1 p-2 bg-gray-50 rounded">{selectedLand.owner || '-'}</div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">联系电话</label>
+                      <div className="mt-1 p-2 bg-gray-50 rounded">{selectedLand.ownerPhone || '-'}</div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">确权证号</label>
+                      <div className="mt-1 p-2 bg-gray-50 rounded">{selectedLand.certificateNumber || '-'}</div>
+                    </div>
+                    <div className="col-span-2">
+                      <label className="text-sm font-medium text-muted-foreground">承包期限</label>
+                      <div className="mt-1 p-2 bg-gray-50 rounded">
+                        {selectedLand.contractStartDate || '-'} 至 {selectedLand.contractEndDate || '-'}
+                      </div>
+                    </div>
+                  </div>
+
+                  {selectedLand.tags && selectedLand.tags.length > 0 && (
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">地块标签</label>
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        {selectedLand.tags.map(tag => {
+                          const tagData = customTags.find(t => t.name === tag);
+                          return (
+                            <Badge
+                              key={tag}
+                              style={tagData ? {
+                                backgroundColor: tagData.color,
+                                color: 'white'
+                              } : {}}
+                            >
+                              {tag}
+                            </Badge>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {selectedLand.remarks && (
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">备注说明</label>
+                      <div className="mt-1 p-2 bg-gray-50 rounded">{selectedLand.remarks}</div>
+                    </div>
+                  )}
+
+                  <div>
+                    <label className="text-sm font-medium text-muted-foreground">位置信息</label>
+                    <div className="mt-2 w-full h-60 rounded-lg border-2 bg-gradient-to-br from-green-50 to-blue-50 flex items-center justify-center">
+                      <div className="text-center">
+                        <MapPin className="w-12 h-12 text-green-600 mx-auto mb-2 opacity-50" />
+                        <p className="text-green-800 mb-1">{selectedLand.location}</p>
+                        {selectedLand.centerPoint && (
+                          <p className="text-xs text-muted-foreground">
+                            中心坐标: {selectedLand.centerPoint.lat.toFixed(6)}, {selectedLand.centerPoint.lng.toFixed(6)}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+              <DialogFooter>
+                <Button onClick={() => setShowDetailDialog(false)}>关闭</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+
+          {/* 删除确认对话框 */}
+          <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>确认删除</AlertDialogTitle>
+                <AlertDialogDescription>
+                  确定要删除该地块吗？此操作无法撤销。
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>取消</AlertDialogCancel>
+                <AlertDialogAction
+                  className="bg-red-600 hover:bg-red-700"
+                  onClick={confirmDelete}
+                >
+                  删除
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          {/* 版本历史对话框 */}
+          {selectedLandForHistory && (
+            <LandVersionHistory
+              land={selectedLandForHistory}
+              open={showHistoryDialog}
+              onOpenChange={setShowHistoryDialog}
+              onRestore={(version) => {
+                // 处理版本恢复逻辑
+                console.log('恢复版本:', version);
+              }}
+            />
+          )}
+
+          {/* 标签管理对话框 */}
+          <Dialog open={showTagDialog} onOpenChange={setShowTagDialog}>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>管理地块标签</DialogTitle>
+                <DialogDescription>
+                  为 {selectedLandForTag?.name} 选择标签
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                {customTags.length === 0 ? (
+                  <div className="text-center text-muted-foreground py-6">
+                    <TagIcon className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                    <p>暂无可用标签</p>
+                    <p className="text-xs mt-1">请先在"地块分类与标签管理"中创建标签</p>
+                  </div>
+                ) : (
+                  <div className="flex flex-wrap gap-2">
+                    {customTags.map(tag => {
+                      const isSelected = selectedTags.includes(tag.name);
+                      return (
+                        <Badge
+                          key={tag.id}
+                          className="cursor-pointer px-3 py-1.5"
+                          style={{
+                            backgroundColor: isSelected ? tag.color : 'transparent',
+                            color: isSelected ? 'white' : tag.color,
+                            border: `2px solid ${tag.color}`,
+                          }}
+                          onClick={() => toggleTag(tag.name)}
+                        >
+                          {tag.name}
+                          {isSelected && ' ✓'}
+                        </Badge>
+                      );
+                    })}
+                  </div>
+                )}
+                <div className="pt-2">
+                  <Label className="text-xs">已选择标签</Label>
+                  <div className="mt-2 min-h-[2rem] flex flex-wrap gap-2">
+                    {selectedTags.length === 0 ? (
+                      <span className="text-sm text-muted-foreground">未选择</span>
+                    ) : (
+                      selectedTags.map(tagName => {
+                        const tagData = customTags.find(t => t.name === tagName);
+                        return (
+                          <Badge
+                            key={tagName}
+                            style={tagData ? {
+                              backgroundColor: tagData.color,
+                              color: 'white'
+                            } : {}}
+                          >
+                            {tagName}
+                          </Badge>
+                        );
+                      })
+                    )}
+                  </div>
+                </div>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setShowTagDialog(false)}>
+                  取消
+                </Button>
+                <Button className="bg-green-600 hover:bg-green-700" onClick={handleSaveTags}>
+                  保存
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </>
+      ) : (
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold mb-4">
+            {editingLandId ? '编辑地块' : '新建地块'}
+          </h3>
+          <LandEditor
+            landId={editingLandId}
+            onSave={handleSave}
+            onCancel={handleCancel}
+            lands={lands}
+          />
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function LandEditor({ landId, onSave, onCancel, lands }: {
+  landId?: string;
+  onSave: (land: Land) => void;
+  onCancel: () => void;
+  lands: Land[];
+}) {
+  // UI状态
+  const [activeTab, setActiveTab] = useState('basic');
+
+  // 表单数据
+  const [formData, setFormData] = useState<Partial<Land>>(() => {
+    if (landId) {
+      const land = lands.find(l => l.id === landId);
+      return land || {
+        id: '',
+        code: '',
+        name: '',
+        area: 0,
+        perimeter: 0,
+        location: '',
+        soilType: 'loam',
+        status: 'active',
+        owner: '',
+        ownerPhone: '',
+        contractStartDate: '',
+        contractEndDate: '',
+        contractPeriod: 0,
+        certificateNumber: '',
+        tags: [],
+        landUseType: '',
+        remarks: '',
+        coordinates: [],
+        centerPoint: { lat: 39.9042, lng: 116.4074 },
+        createdAt: '',
+        updatedAt: ''
+      };
+    }
+    return {
+      id: '',
+      code: '',
+      name: '',
+      area: 0,
+      perimeter: 0,
+      location: '',
+      soilType: 'loam',
+      status: 'active',
+      owner: '',
+      ownerPhone: '',
+      contractStartDate: '',
+      contractEndDate: '',
+      contractPeriod: 0,
+      certificateNumber: '',
+      tags: [],
+      landUseType: '',
+      remarks: '',
+      coordinates: [],
+      centerPoint: { lat: 39.9042, lng: 116.4074 },
+      createdAt: '',
+      updatedAt: ''
+    };
+  });
+
+  // 地图相关
+  const handleCoordinatesChange = (coordinates: GeoCoordinate[], area: number, perimeter: number) => {
+    setFormData({
+      ...formData,
+      coordinates,
+      area,
+      perimeter,
+      centerPoint: coordinates.length > 0 ? {
+        lat: coordinates.reduce((sum, c) => sum + c.lat, 0) / coordinates.length,
+        lng: coordinates.reduce((sum, c) => sum + c.lng, 0) / coordinates.length
+      } : { lat: 39.9042, lng: 116.4074 }
+    });
+  };
+
+  // 保存地块
+  const handleSave = () => {
+    // 验证必填项
+    if (!formData.name?.trim()) {
+      toast.error('请填写地块名称');
+      setActiveTab('basic');
+      return;
+    }
+
+    if (!formData.location?.trim()) {
+      toast.error('请填写地块位置');
+      setActiveTab('basic');
+      return;
+    }
+
+    if (!formData.owner?.trim()) {
+      toast.error('请填写权属人信息');
+      setActiveTab('ownership');
+      return;
+    }
+
+    // 生成地块编号
+    const code = landId ? formData.code : `L${new Date().getFullYear()}-${String(lands.length + 1).padStart(3, '0')}`;
+
+    const now = new Date().toISOString();
+    const newLand: Land = {
+      ...formData as Land,
+      code,
+      id: landId || Date.now().toString(),
+      updatedAt: now,
+      createdAt: landId ? formData.createdAt || now : now,
+    };
+
+    onSave(newLand);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 头部 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-green-800">
+            {landId ? '编辑地块信息' : '新建地块'}
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            与GIS深度集成的地块编辑器，支持手动绘制、文件导入和版本管理
+          </p>
+        </div>
+        <div className="flex gap-2">
+          {onCancel && (
+            <Button variant="outline" onClick={onCancel}>
+              取消
+            </Button>
+          )}
+          <Button onClick={handleSave}>
+            保存地块
+          </Button>
+        </div>
+      </div>
+
+      {/* 主要内容 */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* 左侧：地图 */}
+        <div className="lg:col-span-2">
+          <LandMapContainer
+            coordinates={formData.coordinates || []}
+            area={formData.area || 0}
+            perimeter={formData.perimeter || 0}
+            onCoordinatesChange={handleCoordinatesChange}
+          />
+        </div>
+
+        {/* 右侧：表单 */}
+        <div>
+          <Card className="p-6">
+            <Tabs value={activeTab} onValueChange={setActiveTab}>
+              <TabsList className="grid grid-cols-4 mb-4">
+                <TabsTrigger value="basic">基本</TabsTrigger>
+                <TabsTrigger value="ownership">权属</TabsTrigger>
+                <TabsTrigger value="attributes">属性</TabsTrigger>
+                <TabsTrigger value="files">附件</TabsTrigger>
+              </TabsList>
+
+              {/* 基本信息 */}
+              <TabsContent value="basic">
+                <LandBasicInfo
+                  formData={formData}
+                  onChange={setFormData}
+                  isEdit={!!landId}
+                />
+              </TabsContent>
+
+              {/* 权属信息 */}
+              <TabsContent value="ownership">
+                <LandOwnershipInfo
+                  formData={formData}
+                  onChange={setFormData}
+                />
+              </TabsContent>
+
+              {/* 地块属性 */}
+              <TabsContent value="attributes">
+                <LandAttributes
+                  formData={formData}
+                  onChange={setFormData}
+                />
+              </TabsContent>
+
+              {/* 附件 */}
+              <TabsContent value="files">
+                <LandAttachments />
+              </TabsContent>
+            </Tabs>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/layout.tsx b/crop-x/src/app/layout.tsx
index 7c5fe0b..2073c90 100644
--- a/crop-x/src/app/layout.tsx
+++ b/crop-x/src/app/layout.tsx
@@ -5,7 +5,7 @@ import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld'
 import '@/styles/globals.css'
 import { ThemeProvider } from 'next-themes'
 import { usePathname } from 'next/navigation'
-import { Building2, Users, Cog, Activity, Mail, UserCircle, Database, Map, BarChart3, Cloud, TrendingUp, GitCompare, AlertTriangle, FileText, MapPin, Settings, User, Package, Navigation, Zap, Target, PieChart, Calendar, Shield, Tractor, Clipboard, Brain, Droplets, Book, ShoppingCart } from 'lucide-react'
+import { Building2, Users, Cog, Activity, Mail, UserCircle, Database, Map, BarChart3, Cloud, TrendingUp, GitCompare, AlertTriangle, FileText, MapPin, Settings, User, Package, Navigation, Zap, Target, PieChart, Calendar, Shield, Tractor, Clipboard, ClipboardCheck, Brain, Droplets, Book, ShoppingCart } from 'lucide-react'
 
 const navbarData = {
   logo: {
@@ -226,20 +226,20 @@ const fieldMessageManagement = {
     {
       title: "地块档案管理",
       url: "/land-information/archive",
-      icon: <Database className="w-4 h-4" />,
+      icon: <FileText className="w-4 h-4" />,
       items: [
         {
-          title: "地块录入维护",
-          url: "/land-information/archive/entry",
+          title: "地块档案管理",
+          url: "/land-information/archive/manage",
           isActive: false
         },
         {
-          title: "地块分类管理",
+          title: "地块分类与标签管理",
           url: "/land-information/archive/classification",
           isActive: false
         },
         {
-          title: "地块统计分析",
+          title: "统计分析",
           url: "/land-information/archive/statistics",
           isActive: false
         }
@@ -251,22 +251,22 @@ const fieldMessageManagement = {
       icon: <Map className="w-4 h-4" />,
       items: [
         {
-          title: "地块GIS地图",
+          title: "GIS地图管理",
           url: "/land-information/map/gis",
           isActive: false
         },
         {
-          title: "地块绘制编辑",
+          title: "数字化绘制与编辑",
           url: "/land-information/map/draw",
           isActive: false
         },
         {
-          title: "地块空间查询",
+          title: "空间数据管理",
           url: "/land-information/map/spatial-query",
           isActive: false
         },
         {
-          title: "地块卫星影像",
+          title: "地块影像",
           url: "/land-information/map/satellite",
           isActive: false
         }
@@ -275,7 +275,7 @@ const fieldMessageManagement = {
     {
       title: "空间分析与决策支持",
       url: "/land-information/analysis",
-      icon: <BarChart3 className="w-4 h-4" />,
+      icon: <TrendingUp className="w-4 h-4" />,
       items: [
         {
           title: "土壤基础数据",
@@ -314,27 +314,22 @@ const fieldMessageManagement = {
     {
       title: "地块适宜性评价",
       url: "/land-information/suitability",
-      icon: <TrendingUp className="w-4 h-4" />,
+      icon: <ClipboardCheck className="w-4 h-4" />,
       items: [
         {
-          title: "综合适宜性评价",
+          title: "多因子综合评价",
           url: "/land-information/suitability/comprehensive",
           isActive: false
         },
         {
-          title: "批量适宜性评价",
+          title: "自动化空间分析",
           url: "/land-information/suitability/batch",
           isActive: false
         },
         {
-          title: "作物适宜性评价",
+          title: "作物适配推荐",
           url: "/land-information/suitability/crop",
           isActive: false
-        },
-        {
-          title: "权重设置",
-          url: "/land-information/suitability/weight",
-          isActive: false
         }
       ]
     },
@@ -344,17 +339,17 @@ const fieldMessageManagement = {
       icon: <GitCompare className="w-4 h-4" />,
       items: [
         {
-          title: "指标对比",
+          title: "多维度指标看板",
           url: "/land-information/comparison/indicator",
           isActive: false
         },
         {
-          title: "图表对比",
+          title: "可视化图表分析",
           url: "/land-information/comparison/chart",
           isActive: false
         },
         {
-          title: "报告对比",
+          title: "对比报告生成",
           url: "/land-information/comparison/report",
           isActive: false
         }
@@ -366,17 +361,17 @@ const fieldMessageManagement = {
       icon: <AlertTriangle className="w-4 h-4" />,
       items: [
         {
-          title: "风险监测",
+          title: "实时风险监测",
           url: "/land-information/risk/monitoring",
           isActive: false
         },
         {
-          title: "风险推送",
+          title: "预警推送管理",
           url: "/land-information/risk/push",
           isActive: false
         },
         {
-          title: "风险处置",
+          title: "预警处置跟踪",
           url: "/land-information/risk/disposal",
           isActive: false
         }
diff --git a/crop-x/src/components/ui/data-pagination.tsx b/crop-x/src/components/ui/data-pagination.tsx
new file mode 100644
index 0000000..9c11ccb
--- /dev/null
+++ b/crop-x/src/components/ui/data-pagination.tsx
@@ -0,0 +1,188 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal } from 'lucide-react';
+import { Button } from './button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+import { cn } from '@/lib/utils';
+
+interface DataPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  pageSize: number;
+  totalItems: number;
+  startIndex: number;
+  endIndex: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  canPreviousPage: boolean;
+  canNextPage: boolean;
+  pageSizeOptions?: number[];
+}
+
+export function DataPagination({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalItems,
+  startIndex,
+  endIndex,
+  onPageChange,
+  onPageSizeChange,
+  canPreviousPage,
+  canNextPage,
+  pageSizeOptions = [10, 30, 50, 100],
+}: DataPaginationProps) {
+  // 生成页码数组
+  const generatePageNumbers = () => {
+    const pages: (number | 'ellipsis')[] = [];
+    const maxVisiblePages = 5;
+
+    if (totalPages <= maxVisiblePages) {
+      // 如果总页数少，显示所有页码
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // 总是显示第一页
+      pages.push(1);
+
+      if (currentPage > 3) {
+        pages.push('ellipsis');
+      }
+
+      // 显示当前页附近的页码
+      const startPage = Math.max(2, currentPage - 1);
+      const endPage = Math.min(totalPages - 1, currentPage + 1);
+
+      for (let i = startPage; i <= endPage; i++) {
+        pages.push(i);
+      }
+
+      if (currentPage < totalPages - 2) {
+        pages.push('ellipsis');
+      }
+
+      // 总是显示最后一页
+      if (totalPages > 1) {
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = generatePageNumbers();
+
+  if (totalItems === 0) {
+    return null;
+  }
+
+  return (
+    <div className="border-t bg-background">
+      <div className="flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
+        {/* 左侧：每页显示数量 */}
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground hidden sm:inline">每页显示</span>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={(value) => onPageSizeChange(Number(value))}
+          >
+            <SelectTrigger className="h-9 w-[70px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={size.toString()}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-sm text-muted-foreground">条</span>
+        </div>
+
+        {/* 中间：分页器 */}
+        <div className="flex items-center gap-2">
+          {/* 第一页 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(1)}
+            disabled={!canPreviousPage}
+            className="h-9 w-9 p-0 hidden sm:flex"
+          >
+            <ChevronsLeft className="h-4 w-4" />
+          </Button>
+
+          {/* 上一页 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(currentPage - 1)}
+            disabled={!canPreviousPage}
+            className="h-9 w-9 p-0"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+
+          {/* 页码 */}
+          <div className="flex items-center gap-1">
+            {pageNumbers.map((page, index) => (
+              <React.Fragment key={index}>
+                {page === 'ellipsis' ? (
+                  <div className="flex h-9 w-9 items-center justify-center">
+                    <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
+                  </div>
+                ) : (
+                  <Button
+                    variant={currentPage === page ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => onPageChange(page)}
+                    className={cn(
+                      'h-9 w-9 p-0',
+                      currentPage === page && 'bg-green-600 hover:bg-green-700 text-white'
+                    )}
+                  >
+                    {page}
+                  </Button>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+
+          {/* 下一页 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(currentPage + 1)}
+            disabled={!canNextPage}
+            className="h-9 w-9 p-0"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+
+          {/* 最后一页 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(totalPages)}
+            disabled={!canNextPage}
+            className="h-9 w-9 p-0 hidden sm:flex"
+          >
+            <ChevronsRight className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* 右侧：统计信息 */}
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span className="hidden sm:inline">
+            显示 <span className="font-medium text-foreground">{startIndex}</span> 至{' '}
+            <span className="font-medium text-foreground">{endIndex}</span> 条，
+          </span>
+          <span>
+            共 <span className="font-medium text-foreground">{totalItems}</span> 条
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/lib/usePagination.ts b/crop-x/src/lib/usePagination.ts
new file mode 100644
index 0000000..4894f78
--- /dev/null
+++ b/crop-x/src/lib/usePagination.ts
@@ -0,0 +1,78 @@
+import { useState, useMemo } from 'react';
+
+export interface PaginationConfig {
+  currentPage: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface UsePaginationReturn<T> {
+  currentPage: number;
+  pageSize: number;
+  totalPages: number;
+  paginatedData: T[];
+  goToPage: (page: number) => void;
+  nextPage: () => void;
+  previousPage: () => void;
+  setPageSize: (size: number) => void;
+  canPreviousPage: boolean;
+  canNextPage: boolean;
+  startIndex: number;
+  endIndex: number;
+}
+
+export function usePagination<T>(
+  data: T[],
+  initialPageSize: number = 10
+): UsePaginationReturn<T> {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+
+  const totalPages = Math.ceil(data.length / pageSize);
+
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return data.slice(startIndex, endIndex);
+  }, [data, currentPage, pageSize]);
+
+  const goToPage = (page: number) => {
+    const pageNumber = Math.max(1, Math.min(page, totalPages));
+    setCurrentPage(pageNumber);
+  };
+
+  const nextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const previousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleSetPageSize = (size: number) => {
+    setPageSize(size);
+    setCurrentPage(1); // 重置到第一页
+  };
+
+  const startIndex = (currentPage - 1) * pageSize + 1;
+  const endIndex = Math.min(currentPage * pageSize, data.length);
+
+  return {
+    currentPage,
+    pageSize,
+    totalPages,
+    paginatedData,
+    goToPage,
+    nextPage,
+    previousPage,
+    setPageSize: handleSetPageSize,
+    canPreviousPage: currentPage > 1,
+    canNextPage: currentPage < totalPages,
+    startIndex,
+    endIndex,
+  };
+}
\ No newline at end of file