生产管理系统前端 - 地块档案管理页面开发

crop-x/src/app/(app)/land-information/archive/entry/page.tsx

@@ -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>
-  );
-}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+);

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
         }

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>
+  );
+}

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,
+  };
+}