# 实现“添加交易”对话框

## 概述

您的银行应用现在已经具备了稳健的状态管理和数据持久化功能，但缺少了一个真实银行应用所需的重要功能：允许用户添加自己的交易。在本作业中，您将实现一个完整的“添加交易”对话框，并与现有的状态管理系统无缝集成。

本作业将汇集您在四个银行课程中所学的所有内容：HTML 模板、表单处理、API 集成和状态管理。

## 学习目标

完成本作业后，您将能够：
- **创建** 适合用户输入的友好对话框界面
- **实现** 具有键盘和屏幕阅读器支持的无障碍表单设计
- **集成** 新功能到现有的状态管理系统
- **练习** API 通信和错误处理
- **应用** 现代网页开发模式于真实功能

## 操作说明

### 第一步：添加交易按钮

**创建** 一个“添加交易”按钮，放置在仪表盘页面，方便用户查找和访问。

**要求：**
- **将** 按钮放在仪表盘的合适位置
- **使用** 明确、面向动作的按钮文本
- **按照** 现有用户界面设计风格为按钮美化样式
- **确保** 按钮支持键盘访问

### 第二步：对话框实现

选择以下两种方法之一来实现您的对话框：

**方案 A：独立页面**
- **创建** 一个新的 HTML 模板用于交易表单
- **在** 路由系统中添加新路由
- **实现** 往返表单页面的导航

**方案 B：模态对话框（推荐）**
- **使用** JavaScript 在不离开仪表盘的情况下显示/隐藏对话框
- **采用** [`hidden` 属性](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) 或 CSS 类实现显示控制
- **营造** 流畅的用户体验，并正确管理焦点

### 第三步：无障碍实现

**确保** 您的对话框符合[模态对话框的无障碍标准](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)：

**键盘导航：**
- **支持** 使用 Esc 键关闭对话框
- **限制** 在对话框打开时焦点在对话框内部循环
- **关闭后** 将焦点返回触发按钮

**屏幕阅读器支持：**
- **添加** 合适的 ARIA 标签和角色
- **向** 屏幕阅读器通报对话框的打开和关闭
- **提供** 清晰的表单字段标签和错误消息

### 第四步：表单创建

**设计** 一个 HTML 表单来收集交易数据：

**必填字段：**
- **日期**：交易发生时间
- **描述**：交易用途说明
- **金额**：交易金额（收入为正数，支出为负数）

**表单功能：**
- **提交前** 验证用户输入内容
- **为** 无效数据提供明确的错误提示
- **包含** 有用的占位符文本和标签
- **样式** 与现有设计保持一致

### 第五步：API 集成

**将** 您的表单连接到后端 API：

**实现步骤：**
- **查阅** [服务器 API 规范](../api/README.md) 以获取正确的端点和数据格式
- **将表单输入** 转换为 JSON 数据
- **使用** 适当的错误处理将数据发送到 API
- **向用户显示** 成功/失败消息
- **优雅处理** 网络错误

### 第六步：状态管理集成

**在仪表盘** 更新新添加的交易：

**集成要求：**
- **成功添加交易后** 刷新账户数据
- **更新** 仪表盘显示，无需页面刷新
- **确保** 新交易立即显示
- **保持** 整个过程中的状态一致性

## 技术规格

**API 端点详情：**
请参阅[服务器 API 文档](../api/README.md)了解：
- 交易数据所需的 JSON 格式
- HTTP 方法和端点 URL
- 期望的响应格式
- 错误响应处理

**预期效果：**
完成本作业后，您的银行应用应具备一个功能齐全的“添加交易”功能，外观与行为均专业：

![显示示例“添加交易”对话框的截图](../../../../translated_images/zh-CN/dialog.93bba104afeb79f1.webp)

## 测试您的实现

**功能测试：**
1. **确认** “添加交易”按钮清晰可见且可访问
2. **测试** 对话框能正常打开和关闭
3. **验证** 表单验证适用于所有必填字段
4. **检查** 成功的交易能立即显示在仪表盘
5. **确保** 无效数据和网络问题的错误处理有效

**无障碍测试：**
1. **使用** 仅键盘操作完成整个流程
2. **使用** 屏幕阅读器测试对话框开关及通知
3. **验证** 焦点管理是否正确
4. **检查** 所有表单控件是否具有适当标签

## 评估标准

| 标准 | 优秀 | 合格 | 需改进 |
| -------- | --------- | -------- | ----------------- |
| **功能性** | 添加交易功能完美运行，用户体验优秀，遵循课程所有最佳实践 | 添加交易功能正常工作，但可能未遵循部分最佳实践或存在轻微可用性问题 | 添加交易功能部分可用，存在较大可用性问题 |
| **代码质量** | 代码结构良好，遵循既定模式，包含适当错误处理，与现有状态管理无缝集成 | 代码功能正常，但结构存在些许问题，与现有代码库模式不够一致 | 代码存在重大结构性问题，或无法很好地与现有模式集成 |
| **无障碍性** | 完整支持键盘导航，兼容屏幕阅读器，遵循 WCAG 指南且焦点管理优秀 | 实现基本无障碍功能，但可能缺失某些键盘导航或屏幕阅读器支持 | 无或极少考虑无障碍需求 |
| **用户体验** | 界面直观且精良，反馈清晰，交互流畅，专业美观 | 用户体验良好，但反馈或视觉设计存在微小改进空间 | 用户体验差，界面混乱或缺乏有效用户反馈 |

## 其他挑战（可选）

完成基础要求后，您可以考虑以下增强功能：

**增强功能：**
- **添加** 交易类别（餐饮、交通、娱乐等）
- **实现** 实时反馈的输入验证
- **创建** 面向高级用户的键盘快捷键
- **添加** 交易编辑和删除功能

**高级集成：**
- **实现** 最近添加交易的撤销功能
- **添加** 从 CSV 文件批量导入交易
- **创建** 交易搜索和筛选功能
- **实现** 数据导出功能

这些可选功能将帮助您练习更高级的网页开发概念，打造更完整的银行应用！

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**：
本文件使用AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)进行翻译。尽管我们努力确保准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文件应被视为权威版本。对于关键信息，建议采用专业人工翻译。因使用本翻译而产生的任何误解或误释，我们概不负责。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->