OneTimeSecret 项目中的动态域名管理方案优化

在 Web 应用开发中，域名管理是一个常见的需求，尤其是对于需要支持自定义域名的服务。OneTimeSecret 项目近期对其域名管理系统进行了重构，从静态处理方式迁移到基于 Vue 组合式 API 的动态解决方案。这一改进不仅提升了代码的可维护性，还增强了用户体验。

原有方案的局限性

在之前的实现中，OneTimeSecret 通过全局变量 window.custom_domains 来管理自定义域名。这种方式存在几个明显的问题：

1. 状态管理分散：域名数据分散在各个组件中，难以保持同步
2. 缺乏验证状态跟踪：无法实时反映域名的验证状态变化
3. 扩展性差：新增功能（如域名验证历史记录）难以实现
4. 类型不安全：缺乏 TypeScript 类型支持，容易引入运行时错误

新方案的核心设计

为了解决这些问题，团队设计并实现了 useCustomDomains 组合式函数，它提供了以下核心功能：

1. 集中式状态管理

采用 Pinia 作为状态管理库，与现有的 CSRF 存储模式保持一致。这种设计带来了几个优势：

• 单一数据源：所有组件访问同一份域名数据
• 响应式更新：任何状态变化自动反映到所有使用该状态的组件
• 持久化支持：可轻松集成 localStorage 实现数据持久化

2. 完善的类型系统

新方案引入了强类型支持，定义了清晰的接口：

interface CustomDomain {
  domain: string;
  isVerified: boolean;
  lastVerified?: Date;
}

这种类型定义不仅提高了代码的可靠性，还通过 IDE 的智能提示提升了开发效率。

3. 域名验证状态追踪

新系统能够实时跟踪每个域名的验证状态，包括：

• 当前验证状态（已验证/未验证）
• 最后验证时间戳
• 验证状态变更历史

这使得用户可以更清楚地了解域名配置情况，也便于开发者调试相关问题。

实现细节与挑战

在迁移过程中，开发团队面临了几个技术挑战：

1. 向后兼容性处理

为了平滑过渡，新系统需要兼容现有的 window.custom_domains 用法。解决方案是：

• 初始化时从 window 对象导入现有域名
• 状态变更时同步更新 window 对象
• 逐步迁移各组件到新的组合式 API

2. 竞态条件预防

域名验证通常涉及异步操作，容易出现竞态条件。新系统通过以下方式避免：

• 使用唯一标识跟踪每个验证请求
• 实现请求取消机制
• 添加防抖处理高频操作

3. 性能优化

频繁的验证检查可能影响性能，解决方案包括：

• 实现智能缓存策略
• 按需验证而非全量检查
• 使用 Web Worker 处理密集型操作

实际应用效果

新系统已在 SecretForm 组件中成功应用，带来了明显的改进：

1. 代码可维护性提升：域名逻辑集中管理，减少重复代码
2. 用户体验改善：实时反馈域名状态变化
3. 扩展能力增强：轻松支持未来可能添加的域名管理功能
4. 错误率降低：类型系统帮助捕获了多个潜在的类型错误

未来规划

虽然当前实现已经解决了主要痛点，团队仍计划进一步优化：

1. 将 SecretContentInputArea 组件迁移到新系统
2. 添加域名使用统计功能
3. 实现更细粒度的权限控制
4. 支持批量域名操作

这次重构展示了如何通过现代前端技术栈改进传统实现，为类似项目提供了有价值的参考。组合式 API 与状态管理的结合，特别适合这类需要共享复杂状态的场景。