🔍 详细排查步骤
第一步：确认AlertDialog代码已正确添加
检查 /components/asset/AssetInventory.tsx 文件
确认文件包含 AlertDialog 导入语句
确认有两个状态变量：showCheckApprovalConfirm 和 showCheckRejectConfirm
确认文件末尾有两个 AlertDialog 组件
预期代码片段1：导入语句
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle
} from '../ui/alert-dialog';
预期代码片段2：状态变量
const [showCheckApprovalConfirm, setShowCheckApprovalConfirm] = useState(false);
const [showCheckRejectConfirm, setShowCheckRejectConfirm] = useState(false);
预期代码片段3：按钮触发
第二步：检查浏览器控制台错误
| 错误类型 |
可能原因 |
解决方法 |
| Module not found |
alert-dialog组件未正确导入 |
检查导入路径是否正确 |
| React Hook error |
状态管理问题 |
检查useState是否正确初始化 |
| CSS/Style error |
样式文件未加载 |
清除缓存并刷新 |
| Cannot read property 'XXX' |
变量未定义 |
检查变量是否正确传递 |
第三步：使用浏览器开发工具检查DOM
检查对话框是否渲染
- 打开盘点详情对话框，点击"审批通过"按钮
- 按F12打开开发者工具
- 切换到"Elements"标签
- 按 Ctrl+F 搜索 "alert-dialog" 或 "审批通过确认"
- 检查是否能找到AlertDialog的DOM结构
⚠️ 如果找不到AlertDialog的DOM：
- 说明组件没有正确渲染
- 检查状态变量是否正确更新
- 检查条件渲染逻辑
第四步：检查按钮样式和z-index
使用元素检查器
- 在Elements标签中找到按钮元素
- 查看右侧的"Styles"面板
- 检查按钮是否有 display: none 或 visibility: hidden
- 检查 opacity 是否为 0
- 检查 z-index 是否太小（应该 > 50）
可能的样式问题
| 样式属性 |
问题值 |
正确值 |
| display |
none |
inline-flex / flex |
| visibility |
hidden |
visible |
| opacity |
0 |
1 |
| z-index |
-1 / 0 |
50+ |
| position |
absolute (out of view) |
static / relative |
🛠️ 常见问题和解决方案
问题1：按钮不显示，但对话框标题和内容显示正常
可能原因：
- AlertDialogFooter 组件没有正确渲染
- 按钮组件的样式被覆盖
- buttonVariants函数有问题
解决方案：
在浏览器控制台中执行以下代码，检查按钮是否存在：
// 查找所有AlertDialog按钮
document.querySelectorAll('[data-slot="alert-dialog-footer"] button');
// 应该返回2个按钮（取消和确认）
问题2：整个对话框不显示
可能原因：
- 状态变量没有正确更新
- AlertDialog组件放在了错误的位置
- 条件渲染逻辑错误
解决方案：
在点击"审批通过"按钮后，在控制台检查状态：
// 在AssetInventory.tsx中添加调试日志
onClick={() => {
console.log('点击审批通过按钮');
setShowCheckApprovalConfirm(true);
console.log('已设置showCheckApprovalConfirm为true');
}}
问题3：点击按钮没有反应
可能原因：
- onClick事件被阻止
- 事件冒泡问题
- 按钮被其他元素覆盖
解决方案：
检查按钮的pointer-events属性：
// 在开发工具的Elements面板中，选中按钮
// 在Styles面板中查找：
pointer-events: none; // 如果是这个值，说明按钮被禁用了
// 应该是：
pointer-events: auto; // 或者没有这个属性
问题4：按钮在对话框外面或位置错误
可能原因：
- AlertDialogFooter的布局样式有问题
- flexbox布局被打断
解决方案：
检查AlertDialogFooter的样式：
// 应该包含的样式：
flex flex-col-reverse gap-2 sm:flex-row sm:justify-end
// 如果缺少，手动添加：
className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"