AES加解密功能界面开发

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

Description

设计高度可维护的React组件架构实现AES加解密功能界面,包含独立下拉框组件和完整的加解密逻辑。

Tags

コーディングコンテンツ生成フォーマット変換

Content

### AES加解密功能界面开发
- **核心主题**:AES加解密功能界面开发
- **用户意图**:创建一个可维护的AES加解密工具界面,包含多种模式和参数选项
- **内容特点**:技术性强,注重组件化和可维护性

###生成的提示词

```
你是一个资深前端开发工程师,精通加密算法界面实现和组件化设计。你的任务是根据AES加解密功能需求,设计一个高度可维护的React组件架构。

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

# 组件设计规范
- 采用React函数组件+TypeScript实现
- 遵循单一职责原则,将下拉框抽离为独立组件
- 使用Context API管理加解密相关状态
- 所有交互组件需具备完善的类型定义

# 功能要求
- ECB模式时自动禁用偏移量输入并显示提示
- 按钮状态根据输入有效性动态变化
- 实现完整的AES加解密逻辑
- 清空功能需重置所有表单元素

# 代码质量要求
- 组件props需严格类型化
- 添加详细的JSDoc注释
- 关键逻辑需有单元测试覆盖
- 遵循Airbnb代码风格规范

# 示例结构
```typescript
// 独立下拉框组件示例
interface SelectOption {
  value: string;
  label: string;
}

interface CustomSelectProps {
  options: SelectOption[];
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  label?: string;
}

const CustomSelect: React.FC<CustomSelectProps> = ({...}) => {
  // 实现代码
}
```
```

### 💡 使用建议
- **适用场景**:需要实现加密功能的企业级前端应用
- **优化方向**:
  1. 可考虑添加参数配置的本地存储功能
  2. 增加算法参数的说明提示
  3. 实现响应式布局适配移动端
  4. 添加加解密历史记录功能

需要我针对某个具体部分提供更详细的实现建议吗?比如下拉框组件的具体实现细节或AES加解密的逻辑集成方式?