smart-crop-ui/src/ROUTE_PLANNING_UPDATE.md

✅ 作业路线规划 - 名称编辑与保存功能更新

🎯 更新内容

根据用户反馈，新增以下功能：

1. ✅ 路线名称编辑
2. ✅ 明确的保存操作
3. ✅ 未保存更改提示

---

📦 新增功能

1️⃣ 路线名称编辑

功能描述:

• 每个路线都可以编辑名称
• 点击路线列表中的"编辑"按钮
• 弹出对话框输入新名称
• 支持实时修改

使用方式:

1. 在路线列表中找到要编辑的路线
2. 点击路线右侧的 [✏️] 编辑按钮
3. 在对话框中输入新名称
4. 点击"保存"按钮

界面示例:

┌────────────────────────────┐
│  编辑路线名称              │
├────────────────────────────┤
│                            │
│  路线名称:                 │
│  [东地1号作业路线____]     │
│                            │
│  [取消]  [💾 保存]        │
└────────────────────────────┘

---

2️⃣ 保存操作

功能描述:

• 生成路线后不会自动保存
• 需要明确点击"保存"按钮
• 避免误操作覆盖数据

保存时机:

• ✅ 绘制农田边界后
• ✅ 标注障碍物后
• ✅ 生成作业路线后
• ✅ 修改参数重新生成后

保存按钮位置:

位置1: 页面顶部

┌─────────────────────────────────────┐
│  作业路线规划    [💾 保存更改] [+ 新建]│
└─────────────────────────────────────┘

位置2: 参数面板

┌──────────────────┐
│  作业参数        │
├──────────────────┤
│  行距: 3米       │
│  方向: 0度       │
│  ...             │
│                  │
│  [生成路线]      │
│  [💾 保存路线]  │  ← 新增
│  [导出路线]      │
└──────────────────┘

---

3️⃣ 未保存更改提示

功能描述:

• 有未保存更改时显示提示
• 保存按钮高亮显示
• 切换路线时提示保存

视觉提示:

1. 路线列表标记

┌──────────────────────┐
│  路线列表            │
├──────────────────────┤
│ ✓ 东地1号 [草稿]    │
│   [未保存]  ← 黄色标记│
│   18行 · 3.6km       │
└──────────────────────┘

2. 保存按钮高亮

┌──────────────────────────────┐
│  [💾 保存更改]  ← 黄色背景  │
└──────────────────────────────┘

3. 切换路线提示

⚠️ 当前路线有未保存的更改，请先保存

---

🔧 技术实现

状态管理

// 新增状态
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
const [editingName, setEditingName] = useState<string>('');
const [showSaveDialog, setShowSaveDialog] = useState(false);

保存逻辑

const saveRoute = () => {
  if (!selectedRoute) {
    toast.error('没有要保存的路线');
    return;
  }

  const updatedRoutes = routes.map(r => 
    r.id === selectedRoute.id ? selectedRoute : r
  );
  
  setRoutes(updatedRoutes);
  setHasUnsavedChanges(false);
  toast.success('路线已保存');
};

编辑名称

const startEditName = (route: RoutePlan) => {
  setEditingRoute(route);
  setEditingName(route.name);
  setShowSaveDialog(true);
};

const saveRouteName = () => {
  if (!editingRoute) return;
  
  if (!editingName.trim()) {
    toast.error('路线名称不能为空');
    return;
  }

  const updatedRoutes = routes.map(r => 
    r.id === editingRoute.id ? { ...r, name: editingName } : r
  );
  
  setRoutes(updatedRoutes);
  toast.success('路线名称已更新');
};

未保存更改检测

// 绘制边界后
if (drawMode === 'boundary') {
  setSelectedRoute({
    ...selectedRoute,
    fieldBoundary: currentDrawing,
  });
  setHasUnsavedChanges(true);  // 标记为未保存
  toast.success('农田边界绘制完成，请点击保存按钮保存');
}

// 生成路线后
const generateRoute = () => {
  // ... 生成逻辑
  setHasUnsavedChanges(true);  // 标记为未保存
  toast.success('路线生成成功！请点击保存按钮保存路线');
};

---

📊 完整工作流程

流程1: 创建并保存新路线

1. 点击"新建规划"按钮
   ↓
2. 点击"绘制边界"，在地图上绘制
   ↓
3. 点击"完成"
   → 提示："农田边界绘制完成，请点击保存按钮保存"
   → 状态：未保存（黄色标记）
   ↓
4. （可选）点击"标注障碍"，标注障碍物
   ↓
5. 设置作业参数
   ↓
6. 点击"生成路线"
   → 提示："路线生成成功！请点击保存按钮保存路线"
   → 状态：未保存（黄色标记）
   ↓
7. 点击"💾 保存路线"按钮
   → 提示："路线已保存"
   → 状态：已保存
   ↓
8. 完成！可以导出或继续编辑

流程2: 编辑路线名称

1. 在路线列表中找到路线
   ↓
2. 点击右侧的 [✏️] 编辑按钮
   ↓
3. 在对话框中输入新名称
   → 例如："东地1号春季作业路线"
   ↓
4. 点击"保存"按钮
   → 提示："路线名称已更新"
   ↓
5. 完成！名称已更新

流程3: 切换路线（有未保存更改）

1. 当前正在编辑路线A
   → 状态：未保存
   ↓
2. 点击路线列表中的路线B
   ↓
3. 系统提示："当前路线有未保存的更改，请先保存"
   → 阻止切换
   ↓
4. 点击"💾 保存更改"
   → 提示："路线已保存"
   ↓
5. 再次点击路线B
   → 成功切换

---

🎨 界面更新

更新前后对比

更新前:

┌────────────────────────────────┐
│  路线列表                      │
├────────────────────────────────┤
│ ✓ 东地1号 [草稿]              │  ← 无法编辑名称
│   18行 · 3.6km                 │
│   [🗑️]                        │  ← 只能删除
└────────────────────────────────┘

[生成路线]  ← 生成后自动保存
[导出路线]

更新后:

┌────────────────────────────────┐
│  路线列表                      │
├────────────────────────────────┤
│ ✓ 东地1号 [草稿] [未保存]     │  ← 未保存提示
│   18行 · 3.6km                 │
│   [✏️] [🗑️]                  │  ← 新增编辑按钮
└────────────────────────────────┘

[生成路线]
[💾 保存路线]  ← 新增保存按钮
[导出路线]

---

✅ 功能验证

测试场景

场景1: 名称编辑

✅ 点击编辑按钮打开对话框
✅ 输入新名称
✅ 保存后名称更新
✅ 列表中显示新名称
✅ 空名称时显示错误

场景2: 保存操作

✅ 绘制边界后显示"未保存"
✅ 生<><E7949F>路线后显示"未保存"
✅ 点击保存后清除"未保存"标记
✅ 保存按钮高亮显示
✅ 保存成功后显示提示

场景3: 未保存更改保护

✅ 有未保存更改时显示黄色标记
✅ 切换路线时提示保存
✅ 删除有未保存更改的路线时提示
✅ 保存后可以正常切换

---

💡 使用建议

最佳实践

1. 及时保存

   建议操作流程:
   绘制边界 → 保存
   标注障碍 → 保存
   生成路线 → 保存
   调整参数 → 重新生成 → 保存
   

2. 命名规范

   建议命名格式:
   - [地块名称] + [季节] + [作物]
   - 例如：东地1号春季小麦作业路线
   - 例如：南地2号秋季玉米作业路线
   

3. 定期备份

   重要路线建议:
   1. 保存后立即导出JSON
   2. 定期导出所有路线
   3. 保存到云端或外部存储
   

---

🎯 更新亮点

1. 用户体验优化

明确的保存流程:

• ❌ 旧版：自动保存，用户不知道何时保存
• ✅ 新版：手动保存，操作清晰明确

未保存提示:

• ❌ 旧版：无提示，容易丢失数据
• ✅ 新版：黄色标记，清晰可见

2. 数据安全性提升

防止误操作:

• ✅ 切换路线前提示保存
• ✅ 删除前检查未保存更改
• ✅ 明确的保存确认

数据一致性:

• ✅ 保存到localStorage
• ✅ 状态同步更新
• ✅ 防止数据丢失

3. 功能完整性

名称管理:

• ✅ 创建时自动命名
• ✅ 随时可以编辑
• ✅ 名称验证（非空）
• ✅ 实时更新显示

---

📝 操作说明

快速上手

1. 编辑路线名称

步骤:
1. 找到要编辑的路线
2. 点击 [✏️] 按钮
3. 输入新名称
4. 点击"保存"

2. 保存路线更改

步骤:
1. 完成绘制或生成路线
2. 观察"未保存"标记
3. 点击"💾 保存路线"按钮
4. 看到"路线已保存"提示

3. 切换路线

步骤:
1. 确保当前路线已保存
2. 点击其他路线
3. 如有未保存更改，先保存
4. 成功切换到新路线

---

🔍 技术细节

状态标记

// 未保存更改标记
{selectedRoute?.id === route.id && hasUnsavedChanges && (
  <Badge variant="outline" className="bg-yellow-100 text-yellow-700">
    未保存
  </Badge>
)}

保存按钮样式

// 条件渲染保存按钮
{hasUnsavedChanges && (
  <Button 
    variant="outline" 
    onClick={saveRoute} 
    className="bg-yellow-50 border-yellow-300"
  >
    <Save className="w-4 h-4 mr-2" />
    保存更改
  </Button>
)}

切换路线保护

onClick={() => {
  if (hasUnsavedChanges && selectedRoute?.id !== route.id) {
    toast.error('当前路线有未保存的更改，请先保存');
    return;
  }
  setSelectedRoute(route);
}}

---

📊 功能对比

功能	更新前	更新后
路线名称编辑	❌ 不支持	✅ 支持
保存操作	自动保存	手动保存
未保存提示	❌ 无	✅ 黄色标记
切换保护	❌ 无	✅ 有
删除保护	❌ 无	✅ 有
用户体验	普通	优秀 ✅
数据安全	一般	高 ✅

---

✅ 总结

新增功能

1. ✅ 路线名称编辑 - 随时修改路线名称
2. ✅ 明确保存操作 - 手动保存，防止误操作
3. ✅ 未保存提示 - 黄色标记，清晰可见
4. ✅ 切换保护 - 防止数据丢失
5. ✅ 删除保护 - 检查未保存更改

用户体验提升

• 📈 操作清晰度: ⭐⭐⭐⭐⭐
• 📈 数据安全性: ⭐⭐⭐⭐⭐
• 📈 功能完整性: ⭐⭐⭐⭐⭐

状态

✅ 更新完成，可正常使用

---

更新时间: 2025-10-17
版本: v1.1
状态: ✅ 已发布