feat: 云账号创建表单 — 修复凭证反序列化bug + 添加账号弹窗
- 后端: 重构 CreateCloudAccount 用独立 createCloudAccountRequest struct， 修复 AccessKey/SecretKey 因 json:"-" 导致反序列化被跳过、凭证永远为空的 bug (Go Pitfall #8) - 前端: 添加账号按钮接入 Dialog 表单 (名称/云平台/AccessKey/SecretKey/月费用/状态)， 移除无 handler 的刷新/编辑按钮，新增名称必填校验
This commit is contained in:
attacker committed
1 parent
5db69e8abc
commit
01a9bebb0c
3 files changed
+223
-14
No files matched your search
@@ -1,18 +1,27 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Plus,
|
||||
Search,
|
||||
Edit2,
|
||||
Trash2,
|
||||
Key,
|
||||
Cloud,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
RefreshCw
|
||||
RefreshCw,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import { cloudApi } from '@/services/api';
|
||||
|
||||
@@ -38,6 +47,55 @@ export function CloudAccountManager() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedProvider, setSelectedProvider] = useState<string>('all');
|
||||
|
||||
// 创建账号表单状态
|
||||
const [formOpen, setFormOpen] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
provider: 'aliyun',
|
||||
access_key: '',
|
||||
secret_key: '',
|
||||
monthly_cost: '',
|
||||
status: 'active',
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
name: '',
|
||||
provider: 'aliyun',
|
||||
access_key: '',
|
||||
secret_key: '',
|
||||
monthly_cost: '',
|
||||
status: 'active',
|
||||
});
|
||||
};
|
||||
|
||||
const handleOpenCreate = () => {
|
||||
resetForm();
|
||||
setFormOpen(true);
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!formData.name.trim() || !formData.provider.trim()) return;
|
||||
try {
|
||||
setSubmitting(true);
|
||||
await cloudApi.createAccount({
|
||||
name: formData.name.trim(),
|
||||
provider: formData.provider,
|
||||
access_key: formData.access_key.trim(),
|
||||
secret_key: formData.secret_key.trim(),
|
||||
monthly_cost: Number(formData.monthly_cost) || 0,
|
||||
status: formData.status,
|
||||
});
|
||||
setFormOpen(false);
|
||||
loadData();
|
||||
} catch (e) {
|
||||
console.error('创建云账号失败:', e);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
@@ -92,7 +150,7 @@ export function CloudAccountManager() {
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</Button>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700">
|
||||
<Button className="bg-blue-600 hover:bg-blue-700" onClick={handleOpenCreate}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
添加账号
|
||||
</Button>
|
||||
@@ -239,12 +297,6 @@ export function CloudAccountManager() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
|
||||
<Edit2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@@ -277,6 +329,114 @@ export function CloudAccountManager() {
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 创建账号 Dialog */}
|
||||
<Dialog open={formOpen} onOpenChange={setFormOpen}>
|
||||
<DialogContent className="bg-slate-800 border-slate-700 text-slate-100 max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-slate-100 flex items-center gap-2">
|
||||
<Cloud className="h-5 w-5 text-blue-400" />
|
||||
添加云账号
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-slate-400">
|
||||
录入多云平台的访问凭证，用于资源同步与成本统计
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">
|
||||
账号名称 <span className="text-red-400">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="阿里云生产账号"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">
|
||||
云平台 <span className="text-red-400">*</span>
|
||||
</Label>
|
||||
<select
|
||||
value={formData.provider}
|
||||
onChange={(e) => setFormData({ ...formData, provider: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-100 text-sm"
|
||||
>
|
||||
<option value="aliyun">阿里云</option>
|
||||
<option value="tencent">腾讯云</option>
|
||||
<option value="aws">AWS</option>
|
||||
<option value="huawei">华为云</option>
|
||||
<option value="azure">Azure</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">AccessKey</Label>
|
||||
<Input
|
||||
placeholder="LTAI..."
|
||||
value={formData.access_key}
|
||||
onChange={(e) => setFormData({ ...formData, access_key: e.target.value })}
|
||||
className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500 font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">SecretKey</Label>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={formData.secret_key}
|
||||
onChange={(e) => setFormData({ ...formData, secret_key: e.target.value })}
|
||||
className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500 font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">月费用 (元)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
value={formData.monthly_cost}
|
||||
onChange={(e) => setFormData({ ...formData, monthly_cost: e.target.value })}
|
||||
className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-slate-300">状态</Label>
|
||||
<select
|
||||
value={formData.status}
|
||||
onChange={(e) => setFormData({ ...formData, status: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-100 text-sm"
|
||||
>
|
||||
<option value="active">正常</option>
|
||||
<option value="inactive">已停用</option>
|
||||
<option value="error">异常</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setFormOpen(false)} className="border-slate-700 text-slate-300 hover:bg-slate-700">
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
disabled={!formData.name.trim() || submitting}
|
||||
onClick={handleCreate}
|
||||
>
|
||||
{submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Plus className="h-4 w-4 mr-2" />}
|
||||
创建账号
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user