AES加解密工具界面开发

Author:匿名用户
2026/01/05 09:12

Description

开发模块化的AES加解密工具组件,强调代码质量、可维护性和用户体验,支持多种加密参数配置。

Tags

代码编程内容生成格式转换

Content

### 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)提供更详细的实现方案吗?