本文实现问题删除功能。
添加删除按钮
与EditIssueButton类似，创建DeleteIssueButton。Delete按钮选择红色。
在IssueDetailPage上添加DeleteIssueButton，两个按钮水平排列，使用Flex 组件并添加 direction=”column”，间隔gap=”3″。
在平板以上宽度，左右侧显示，左侧详细页面宽一点占用4/5（md:col-span-4），右侧按钮占用1/5，Radix UI的sm等于Tailwind的md，稍有点让人混乱。
IssueDetail组件中使用了Card组件，属性prose为了可见性限制了每行宽度显示65字符，添加max-w-full表示利用全部宽度。
最后，在layout.tsx的main添加container组件，以便居中显示。
页面效果。
提交Git，命名：Add a delete button.
添加确认对话框
查看Radix-UI说明，可以很方便实现。
https://www.radix-ui.com/themes/docs/components/alert-dialog
复制代码到DeleteIssueButton，并修改相应显示信息。
查看网页。
提交Git，命名：Show a confirmation dialog box.
构建 API
很简单。
提交Git，命名：Building an API for deleting issues.
删除问题
给Action按钮添加onClick属性。发送delete方法，并转到 /issues 。为了立即生效，我们使用router.refresh();
提交Git，命名：Delete an issue.
处理错误
可能的错误要有预期，用try…catch获取。创建一个State指示是否有错，有错的话显示对话框提示。
目前代码稍有点长了，我们将onClick移到外面。
错误提示框如图。
提交Git，命名：Handle errors.
改善用户体验
为提升用户体验，删除操作需要做两件事情：一是进行删除时禁用删除按钮避免多次按；二是添加一个Spinner提示用户正在删除。
非常简单。添加状态isDeleting，根据状态禁用按钮及显示Spinner。
在DELETE方法添加延时模拟查看效果。
提交Git，命名：Improve the user experience.
小结
本文实现了问题删除功能。
下一篇实现用户验证。