Pangolin项目中的一次性密码白名单保存问题解析

问题现象

在使用Pangolin项目的一次性密码(OTP)功能时，用户发现当启用白名单功能后，尝试添加"*@example.com"这样的通配符邮箱地址时，系统虽然显示保存成功，但在页面刷新后这些条目却消失了。进一步测试发现，不仅是通配符邮箱，任何邮箱地址都无法被正确保存。

问题根源

经过项目维护者的调查，发现这不是一个真正的功能缺陷，而是用户操作方式的问题。在Pangolin的界面设计中，邮箱地址输入后需要按下回车键将其转换为"标签/气泡"形式的视觉元素，然后才能进行保存操作。直接输入邮箱后点击"保存白名单"按钮并不会真正保存数据。

技术实现分析

这种设计模式在现代Web应用中很常见，特别是在处理标签或多值输入时。其背后的技术原理是：

1. 输入框监听回车事件，触发将纯文本转换为结构化数据
2. 只有被转换为结构化数据的条目才会被提交到后端
3. 保存按钮只处理已结构化的数据，忽略输入框中的纯文本

这种设计可以防止无效或未完成的数据被提交，同时也提供了更好的用户体验反馈。

解决方案

正确的操作流程应该是：

1. 在输入框中键入邮箱地址
2. 按下回车键将邮箱转换为可视化的标签
3. 确认标签生成后，再点击"保存白名单"按钮
4. 页面刷新后应能看到保存的条目

项目维护者已计划在界面中添加说明文字，使这一操作流程更加明确，避免其他用户遇到同样的困惑。

最佳实践建议

对于开发者而言，在处理类似的多值输入场景时，可以考虑以下优化方案：

1. 在输入框旁添加明确的提示文字
2. 实现实时验证反馈，当用户直接点击保存时提示需要先确认条目
3. 考虑支持两种提交方式：既可以通过回车确认后提交，也可以直接提交输入框内容
4. 使用更明显的视觉反馈区分已确认和未确认的输入

这种类型的用户界面交互问题在实际开发中很常见，理解其背后的设计逻辑有助于开发者构建更友好的用户界面。