TinaCMS项目配置中站点URL管理的用户体验优化

背景介绍

在内容管理系统TinaCMS的项目配置中，站点URL管理是一个重要功能，它允许管理员配置网站可访问的域名列表。然而，该功能在用户体验方面存在一些明显不足，需要从技术层面进行优化改进。

原有问题分析

原实现存在三个主要用户体验问题：

1. 操作流程不连贯：用户添加URL后需要额外点击"保存配置"按钮，这种二次确认操作增加了用户认知负担
2. 数据丢失风险：用户在未保存情况下离开页面时，系统不会提示有未保存的更改
3. 状态反馈不明确：保存按钮在任何状态下都保持可点击状态，无法直观反映是否有未保存更改

技术解决方案

即时保存机制

最核心的改进是将URL添加操作改为即时保存模式。当用户点击"添加"按钮或按回车键时，系统会立即将新URL提交到后端，无需额外的保存操作。这种实现方式：

• 使用异步请求处理保存逻辑
• 在UI层提供加载状态反馈
• 错误情况下回滚UI状态并显示错误提示

导航离开防护

为防止用户意外丢失未保存数据，实现了路由离开防护机制：

• 监控表单脏状态(dirty state)
• 在路由变更前检查并提示用户确认
• 使用React Router的导航守卫功能

按钮状态管理

保存按钮现在具有智能状态：

• 初始状态为禁用(disabled)
• 当检测到表单有实际修改时启用
• 保存过程中显示加载状态
• 保存成功后恢复禁用状态

实现细节

状态管理优化

采用React的useState和useEffect钩子来管理表单状态：

const [urls, setUrls] = useState(initialUrls);
const [isDirty, setIsDirty] = useState(false);

useEffect(() => {
  setIsDirty(!deepEqual(urls, initialUrls));
}, [urls, initialUrls]);

即时保存实现

添加URL时直接触发保存操作：

const handleAddUrl = async (newUrl) => {
  try {
    setSaving(true);
    const updatedUrls = [...urls, newUrl];
    await saveUrls(updatedUrls); // API调用
    setUrls(updatedUrls);
  } catch (error) {
    showErrorToast("保存失败");
  } finally {
    setSaving(false);
  }
};

路由防护实现

使用React Router的useBlocker实现导航离开防护：

useBlocker((tx) => {
  if (isDirty) {
    if (window.confirm("有未保存的更改，确定要离开吗？")) {
      tx.retry();
    }
  }
}, isDirty);

用户体验提升效果

经过这些改进后：

1. 操作流程更加直观，减少了不必要的点击步骤
2. 有效防止了用户意外丢失数据的情况
3. 界面状态反馈更加明确，降低了用户困惑
4. 整体操作效率显著提高

总结

这次优化展示了如何通过前端技术手段显著改善管理界面用户体验。关键在于理解用户真实操作流程，消除不必要的中间步骤，同时确保数据安全性。这种即时保存+状态反馈的模式可以应用于许多类似的配置管理场景。