生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

2025-10-23 10:57:14 +08:00
parent 83523dad64
commit 28229ce795
354 changed files with 147599 additions and 7892 deletions
--- a/src/SELECT_EMPTY_VALUE_FIX.md
+++ b/src/SELECT_EMPTY_VALUE_FIX.md
@@ -0,0 +1,167 @@
+# Select Empty Value 错误修复
+
+## ✅ 问题已解决
+
+修复了 Radix UI Select 组件中空字符串值的错误。
+
+## 🐛 错误描述
+
+```
+Error: A <Select.Item /> must have a value prop that is not an empty string. 
+This is because the Select value can be set to an empty string to clear 
+the selection and show the placeholder.
+```
+
+## 🔍 问题根源
+
+在 `FieldClassificationTags.tsx` 文件中，有两个 Select 组件使用了空字符串 `""` 作为 SelectItem 的 value：
+
+```tsx
+// ❌ 错误的写法
+<SelectItem value="">全部</SelectItem>
+```
+
+Radix UI 不允许使用空字符串作为 SelectItem 的 value，因为空字符串被保留用于清除选择和显示占位符。
+
+## ✅ 修复方案
+
+将空字符串 `""` 替换为有意义的值 `"all"`，并更新相应的逻辑：
+
+### 修复 1: 土壤类型选择器
+
+**修改前：**
+```tsx
+<Select
+  value={queryCondition.soilType?.[0] || ''}
+  onValueChange={(value) => {
+    if (value === '') {
+      setQueryCondition({ ...queryCondition, soilType: undefined });
+    } else {
+      setQueryCondition({ ...queryCondition, soilType: [value as SoilType] });
+    }
+  }}
+>
+  <SelectContent>
+    <SelectItem value="">全部</SelectItem>
+    <SelectItem value="sandy">沙土</SelectItem>
+    {/* ... */}
+  </SelectContent>
+</Select>
+```
+
+**修改后：**
+```tsx
+<Select
+  value={queryCondition.soilType?.[0] || 'all'}
+  onValueChange={(value) => {
+    if (value === 'all') {
+      setQueryCondition({ ...queryCondition, soilType: undefined });
+    } else {
+      setQueryCondition({ ...queryCondition, soilType: [value as SoilType] });
+    }
+  }}
+>
+  <SelectContent>
+    <SelectItem value="all">全部</SelectItem>
+    <SelectItem value="sandy">沙土</SelectItem>
+    {/* ... */}
+  </SelectContent>
+</Select>
+```
+
+### 修复 2: 种植模式选择器
+
+**修改前：**
+```tsx
+<Select
+  value={queryCondition.plantingMode?.[0] || ''}
+  onValueChange={(value) => {
+    if (value === '') {
+      setQueryCondition({ ...queryCondition, plantingMode: undefined });
+    } else {
+      setQueryCondition({ ...queryCondition, plantingMode: [value as PlantingMode] });
+    }
+  }}
+>
+  <SelectContent>
+    <SelectItem value="">全部</SelectItem>
+    <SelectItem value="open-field">露地</SelectItem>
+    {/* ... */}
+  </SelectContent>
+</Select>
+```
+
+**修改后：**
+```tsx
+<Select
+  value={queryCondition.plantingMode?.[0] || 'all'}
+  onValueChange={(value) => {
+    if (value === 'all') {
+      setQueryCondition({ ...queryCondition, plantingMode: undefined });
+    } else {
+      setQueryCondition({ ...queryCondition, plantingMode: [value as PlantingMode] });
+    }
+  }}
+>
+  <SelectContent>
+    <SelectItem value="all">全部</SelectItem>
+    <SelectItem value="open-field">露地</SelectItem>
+    {/* ... */}
+  </SelectContent>
+</Select>
+```
+
+## 📝 修改文件
+
+- **文件**: `/components/field/FieldClassificationTags.tsx`
+- **修改位置**: 两个 Select 组件（土壤类型、种植模式）
+- **修改内容**:
+  1. 将 `value=""` 改为 `value="all"`
+  2. 将默认值从 `''` 改为 `'all'`
+  3. 将条件判断从 `value === ''` 改为 `value === 'all'`
+
+## 🎯 修复效果
+
+- ✅ 消除控制台错误
+- ✅ 保持原有功能不变
+- ✅ "全部" 选项正常工作
+- ✅ 选择其他选项正常过滤
+
+## 🔧 技术说明
+
+### Radix UI Select 规则
+
+Radix UI Select 组件有以下限制：
+
+1. **不允许空字符串值**: `<SelectItem value="">` 是不允许的
+2. **空字符串保留用途**: 空字符串被保留用于清除选择
+3. **必须使用有意义的值**: 所有 SelectItem 必须有非空字符串的唯一值
+
+### 最佳实践
+
+```tsx
+// ✅ 推荐做法
+<SelectItem value="all">全部</SelectItem>
+<SelectItem value="none">无</SelectItem>
+<SelectItem value="default">默认</SelectItem>
+
+// ❌ 避免做法
+<SelectItem value="">全部</SelectItem>
+<SelectItem value="">无</SelectItem>
+```
+
+## 📚 相关资源
+
+- [Radix UI Select 文档](https://www.radix-ui.com/primitives/docs/components/select)
+- [shadcn/ui Select 组件](https://ui.shadcn.com/docs/components/select)
+
+## ✨ 总结
+
+通过将空字符串值替换为 `"all"`，成功修复了 Radix UI Select 组件的错误。此修复：
+
+1. ✅ 符合 Radix UI 规范
+2. ✅ 保持功能完整性
+3. ✅ 提高代码可读性
+4. ✅ 消除控制台警告
+
+**错误已完全修复！** 🎉