问题描述
在API密钥管理页面，本地开发环境使用 `navigator.clipboard.writeText()` 复制API密钥功能正常工作，但打包部署到生产环境后，点击复制按钮报错：`TypeError: Cannot read properties of undefined (reading 'writeText')`。这导致用户无法在生产环境中复制完整的API密钥，影响了用户体验和系统功能完整性。
根本原因
`navigator.clipboard.writeText()` API 具有以下限制：
1. 只能在安全上下文中使用（HTTPS 或 localhost）
2. 需要用户交互触发
3. 在某些生产部署环境中可能存在权限限制
4. 部分旧版浏览器不支持该API
本地开发环境（localhost）满足安全上下文要求，所以能正常工作，但生产环境可能不完全满足这些条件，导致 `navigator.clipboard` 对象不可用。
解决方案
实现了一个兼容性更好的复制函数，包含两种复制方法的降级策略：
1. **主要方法**：优先使用现代 Clipboard API
```javascript
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
return true;
}
```
2. **后备方案**：使用传统的 `document.execCommand('copy')`
```javascript
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
const successful = document.execCommand('copy');
document.body.removeChild(textArea);
return successful;
```
修改了两个复制函数：
- `handleCopyFullApiKey`: 主列表中的复制功能
- `handleCopyApiKey`: 新建API密钥弹窗中的复制功能
背景信息
- **项目类型**: Next.js 15.5.2 管理后台系统
- **技术栈**: React, TypeScript, Next.js, Tailwind CSS
- **问题文件**: `web/src/app/admin/api-keys/page.tsx`
- **影响范围**: API密钥管理页面的复制功能
- **部署环境**: 生产环境（非localhost）
- **用户权限**: 管理员用户
- **业务场景**: 用户需要复制完整的API密钥用于程序化访问系统