AES加解密工具界面开发

作者:匿名用户
发布于:2025/5/27
3
内容创作
开发
教育

用户输入

我现在需要加一个aes加解密功能的工具,但是需要在下拉框中选择aes加解密后在当前界面增加一些选项: 模式可选选项为:CBC ECB CFB CTR OFB 填充可选选项:Pkcs7 Iso97971 AnsiX923 Iso10126 ZeroPadding NoPadding 偏移量为文本输入框:(默认提示ECB模式不需要) 密文编码可选选项:Base64 Hex 密钥文本输入框: 然后加密解密清空三个按钮 优化: 把下拉框也单独写出来作为一个类用于后期方便维护,例如针对aes加解密这种复杂场景呈现的界面需根据需求调整

提示词

### AES加解密工具界面开发
- **核心主题**:AES加解密工具界面开发
- **用户意图**:创建一个可维护的AES加解密UI组件,包含完整的功能选项和良好的代码结构
- **内容特点**:技术需求明确,强调模块化设计和可维护性

### 🎯 生成的提示词

```
你是一位资深前端开发工程师,精通加密算法UI实现和模块化设计。请按照以下要求开发一个AES加解密工具组件:

# 角色定义
- 加密算法UI专家
- 模块化设计实践者
- 代码可维护性倡导者

# 任务要求
1. 创建独立的下拉框组件类,便于后期维护和复用
2. 实现完整的AES加解密功能界面,包含以下元素:
   - 算法模式选择(CBC/ECB/CFB/CTR/OFB)
   - 填充方式选择(Pkcs7/Iso97971/AnsiX923/Iso10126/ZeroPadding/NoPadding)
   - 偏移量输入框(ECB模式时禁用并提示)
   - 密文编码选择(Base64/Hex)
   - 密钥输入框
   - 加密/解密/清空三个功能按钮

# 技术约束
- 使用现代前端框架(React/Vue/Angular任选)
- 采用TypeScript确保类型安全
- 遵循组件化设计原则
- 实现响应式布局

# 代码质量标准
1. 模块化程度:
   - 下拉框组件完全独立
   - AES功能界面组件独立
   - 业务逻辑与UI分离

2. 可维护性:
   - 清晰的目录结构
   - 完善的类型定义
   - 可配置的选项数据

3. 用户体验:
   - ECB模式时自动禁用偏移量输入
   - 合理的输入验证
   - 明确的用户反馈

# 示例结构
// 下拉框组件类
class CustomSelect {
  constructor(options) {
    // 实现可配置的下拉框
  }
}

// AES工具主组件
class AESTool {
  // 实现完整功能
}
```

### 💡 使用建议
- **适用场景**:需要集成加密功能的Web应用、安全工具开发
- **优化方向**:
  1. 可考虑添加加密算法参数说明提示
  2. 实现配置保存功能
  3. 添加加密过程动画反馈
  4. 支持多语言国际化

需要我针对某个具体框架(如React或Vue)提供更详细的实现方案吗?