Twenty项目：实现工作区子域名变更时的登出确认弹窗

背景介绍

在Twenty项目管理系统中，工作区(Workspace)的子域名(subdomain)是一个重要配置项。当管理员修改工作区的子域名时，系统会强制所有用户登出，包括执行修改操作的管理员本人。当前版本中，这一重要操作缺乏明确的用户提示，可能导致用户体验问题。

问题分析

修改子域名触发全局登出的行为是合理的，因为：

1. 用户会话通常与特定域名绑定
2. 域名变更后原有会话可能无法正常工作
3. 需要确保所有用户重新使用新域名登录

然而，当前实现存在以下不足：

• 没有预先告知用户这一操作的影响
• 管理员可能意外触发全局登出而不自知
• 缺乏用户确认环节，操作不可逆

技术实现方案

前端实现要点

1. 确认弹窗设计：

   • 使用模态对话框(Modal)组件
   • 明确提示"修改域名将导致所有用户登出"
   • 提供"确认"和"取消"两个操作按钮

2. 触发时机：

   • 在用户点击"保存"按钮时拦截默认提交行为
   • 先显示确认弹窗，用户确认后再继续提交

3. 用户体验优化：

   • 弹窗内容简明扼要
   • 使用警示图标或颜色强调操作风险
   • 确保弹窗在移动端也能正常显示

后端配合考虑

虽然主要是前端改动，但需要注意：

• 确保后端正确处理带确认的请求
• 保持现有登出逻辑不变
• 考虑可能的并发修改情况

代码示例

以下是React实现的伪代码示例：

function DomainSettingsForm() {
  const [showConfirm, setShowConfirm] = useState(false);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    setShowConfirm(true);
  };

  const handleConfirm = () => {
    // 实际提交逻辑
    api.saveDomainChanges();
    setShowConfirm(false);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        {/* 表单内容 */}
        <button type="submit">保存</button>
      </form>
      
      {showConfirm && (
        <Modal>
          <h3>确认域名修改</h3>
          <p>修改域名将导致所有用户(包括您自己)被登出。</p>
          <button onClick={handleConfirm}>确认修改</button>
          <button onClick={() => setShowConfirm(false)}>取消</button>
        </Modal>
      )}
    </>
  );
}

测试要点

实现后应测试以下场景：

1. 正常流程：显示弹窗 → 确认 → 成功修改并登出
2. 取消流程：显示弹窗 → 取消 → 保持原域名不变
3. 移动端显示和操作
4. 多语言支持(如有)
5. 与其他表单验证的交互

总结

为Twenty项目添加子域名修改确认弹窗是一个典型的用户体验优化改进。这类看似简单的交互增强实际上体现了良好的系统设计原则：

• 尊重用户知情权
• 防止意外操作
• 提升系统透明度

这种改进虽然代码量不大，但对提升系统专业度和用户信任度有显著作用，是开源项目中值得关注的细节优化范例。