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

src/SELECT_EMPTY_STRING_FIXED.md

@@ -0,0 +1,89 @@
+# Select Empty String Error - Fixed ✅
+
+## Issue
+Radix UI Select component doesn't allow `<SelectItem value="" />` with empty strings because empty strings are reserved for clearing the selection.
+
+Error message:
+```
+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.
+```
+
+## Solution
+Replace all empty string values with a special value `'none'` and handle the conversion in the Select component.
+
+## Files Modified
+- `/components/field/SoilBaseData.tsx`
+
+## Changes Made
+
+### 1. Add Dialog - Main Device Selection (Line ~1133)
+**Before:**
+```tsx
+<Select value={newPoint.deviceId} onValueChange={(value) => setNewPoint({ ...newPoint, deviceId: value })}>
+  <SelectContent>
+    <SelectItem value="">不绑定设备</SelectItem>
+```
+
+**After:**
+```tsx
+<Select value={newPoint.deviceId || 'none'} onValueChange={(value) => setNewPoint({ ...newPoint, deviceId: value === 'none' ? '' : value })}>
+  <SelectContent>
+    <SelectItem value="none">不绑定设备</SelectItem>
+```
+
+### 2. Add Dialog - Layer Device Selection (Line ~1239)
+**Before:**
+```tsx
+<Select 
+  value={layer.deviceId || ''} 
+  onValueChange={(value) => handleUpdateLayerDevice(layerIndex, value)}
+>
+  <SelectContent>
+    <SelectItem value="">不绑定设备</SelectItem>
+```
+
+**After:**
+```tsx
+<Select 
+  value={layer.deviceId || 'none'} 
+  onValueChange={(value) => handleUpdateLayerDevice(layerIndex, value === 'none' ? '' : value)}
+>
+  <SelectContent>
+    <SelectItem value="none">不绑定设备</SelectItem>
+```
+
+### 3. Edit Dialog - Main Device Selection (Line ~1374)
+**Before:**
+```tsx
+<Select value={newPoint.deviceId} onValueChange={(value) => setNewPoint({ ...newPoint, deviceId: value })}>
+  <SelectContent>
+    <SelectItem value="">不绑定设备</SelectItem>
+```
+
+**After:**
+```tsx
+<Select value={newPoint.deviceId || 'none'} onValueChange={(value) => setNewPoint({ ...newPoint, deviceId: value === 'none' ? '' : value })}>
+  <SelectContent>
+    <SelectItem value="none">不绑定设备</SelectItem>
+```
+
+## How It Works
+
+1. **Display Value**: When the deviceId is empty, the Select shows `'none'` as the selected value
+2. **User Selection**: When user selects "不绑定设备", the value `'none'` is passed to onValueChange
+3. **Value Conversion**: The onValueChange handler converts `'none'` back to `''` (empty string)
+4. **Internal Storage**: The component internally stores `''` for "no device selected"
+
+This approach maintains backward compatibility with the existing data structure while satisfying Radix UI's requirement that SelectItem values cannot be empty strings.
+
+## Testing
+- ✅ Select "不绑定设备" option works
+- ✅ Select a device works
+- ✅ Switch between device and "不绑定设备" works
+- ✅ No console errors
+- ✅ Data saved correctly with empty string when no device selected
+
+## Status
+**RESOLVED** - All Select components now use non-empty string values for SelectItem.