<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "f23a868536c07da991b1d4e773161e25",
  "translation_date": "2025-08-24T00:14:55+00:00",
  "source_file": "7-bank-project/4-state-management/assignment.md",
  "language_code": "zh"
}
-->
# 实现“添加交易”对话框

## 说明

我们的银行应用程序仍然缺少一个重要功能：输入新交易的功能。
使用您在前四节课中学到的所有内容，来实现一个“添加交易”对话框：

- 在仪表板页面添加一个“添加交易”按钮
- 可以创建一个带有 HTML 模板的新页面，或者使用 JavaScript 显示/隐藏对话框的 HTML，而无需离开仪表板页面（您可以使用 [`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/)
- 实现一个 HTML 表单以接收输入数据
- 从表单数据创建 JSON 数据并发送到 API
- 使用新数据更新仪表板页面

查看 [服务器 API 规范](../api/README.md)，了解需要调用的 API 以及预期的 JSON 格式。

以下是完成任务后的示例结果：

![显示“添加交易”对话框的示例截图](../../../../7-bank-project/4-state-management/images/dialog.png)

## 评分标准

| 标准     | 卓越                                                                                              | 合格                                                                                                                   | 需要改进                                   |
| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
|          | 完全按照课程中看到的所有最佳实践实现了添加交易功能。                                              | 实现了添加交易功能，但未完全遵循课程中看到的最佳实践，或者功能仅部分工作。                                               | 添加交易功能完全无法正常工作。             |

**免责声明**：  
本文档使用AI翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。应以原文档的原始语言版本为权威来源。对于关键信息，建议使用专业人工翻译。我们对因使用此翻译而引起的任何误解或误读不承担责任。