子仓库提交

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