feat: 云账号创建表单 — 修复凭证反序列化bug + 添加账号弹窗

- 后端: 重构 CreateCloudAccount 用独立 createCloudAccountRequest struct，
  修复 AccessKey/SecretKey 因 json:"-" 导致反序列化被跳过、凭证永远为空的 bug (Go Pitfall #8)
- 前端: 添加账号按钮接入 Dialog 表单 (名称/云平台/AccessKey/SecretKey/月费用/状态)，
  移除无 handler 的刷新/编辑按钮，新增名称必填校验

backend/internal/api/handlers/server.go

@@ -3,6 +3,7 @@ package handlers
 import (
 	"net/http"
 	"strconv"
+	"strings"
 
 	"ezops/internal/models"
 
@@ -401,6 +402,16 @@ func (h *CloudAccountHandler) ListCloudAccounts(c *gin.Context) {
 	})
 }
 
+// createCloudAccountRequest 创建云账号请求（独立 request struct，避免 CloudAccount.AccessKey/SecretKey 的 json:"-" 导致无法反序列化）
+type createCloudAccountRequest struct {
+	Name        string  `json:"name"`
+	Provider    string  `json:"provider"`
+	AccessKey   string  `json:"access_key"`
+	SecretKey   string  `json:"secret_key"`
+	MonthlyCost float64 `json:"monthly_cost"`
+	Status      string  `json:"status"`
+}
+
 // CreateCloudAccount 创建云账号
 // @Summary 创建云账号
 // @Description 创建新云账号
@@ -408,12 +419,12 @@ func (h *CloudAccountHandler) ListCloudAccounts(c *gin.Context) {
 // @Accept json
 // @Produce json
 // @Security Bearer
-// @Param request body models.CloudAccount true "创建请求"
+// @Param request body createCloudAccountRequest true "创建请求"
 // @Success 200 {object} models.Response{data=models.CloudAccount}
 // @Router /cloud-accounts [post]
 func (h *CloudAccountHandler) CreateCloudAccount(c *gin.Context) {
-	var account models.CloudAccount
+	var req createCloudAccountRequest
-	if err := c.ShouldBindJSON(&account); err != nil {
+	if err := c.ShouldBindJSON(&req); err != nil {
 		c.JSON(http.StatusBadRequest, models.Response{
 			Code:    400,
 			Message: "请求参数错误: " + err.Error(),
@@ -421,6 +432,28 @@ func (h *CloudAccountHandler) CreateCloudAccount(c *gin.Context) {
 		return
 	}
 
+	if strings.TrimSpace(req.Name) == "" || strings.TrimSpace(req.Provider) == "" {
+		c.JSON(http.StatusBadRequest, models.Response{
+			Code:    400,
+			Message: "账号名称和云平台不能为空",
+		})
+		return
+	}
+
+	status := strings.TrimSpace(req.Status)
+	if status == "" {
+		status = "active"
+	}
+
+	account := models.CloudAccount{
+		Name:        strings.TrimSpace(req.Name),
+		Provider:    strings.TrimSpace(req.Provider),
+		AccessKey:   req.AccessKey,
+		SecretKey:   req.SecretKey,
+		MonthlyCost: req.MonthlyCost,
+		Status:      status,
+	}
+
 	if err := h.db.Create(&account).Error; err != nil {
 		c.JSON(http.StatusInternalServerError, models.Response{
 			Code:    500,

docs/dev-log.md

@@ -171,7 +171,23 @@ cd ~/devops/aiops
   - 浏览器验证: 仪表盘「本月云成本」显示 ¥95,200（真实计算值）✅
   - 健康检查 /health 正常 ✅
 - **下一步建议**:
-  - 云账号「添加账号」按钮弹窗表单实现（当前点击无响应，无法录入月费用）
+  - ~~云账号「添加账号」按钮弹窗表单实现（当前点击无响应，无法录入月费用）~~ ✅ 已完成
   - K8s 集群拓扑图(TopologyView)前后端数据联调
   - 告警「通知配置」按钮功能实现(通知渠道管理弹窗)
   - 仪表盘「+12.5%」等增长率标签从硬编码改为基于 month_trend 真实计算
+  - 云账号「编辑」功能（需后端新增 PUT /cloud-accounts/:id 端点）
+
+## 2026-06-14 07:10 自动推进
+
+- **任务**: 云账号创建表单实现 — 修复后端创建接口无法接收凭证的 bug + 前端添加账号弹窗表单
+- **修改**:
+  - `backend/internal/api/handlers/server.go` — 重构 `CreateCloudAccount`：新增独立的 `createCloudAccountRequest` struct（遵循 Go Pitfall #8）。原代码直接绑定 `models.CloudAccount`，但 AccessKey/SecretKey 字段标记 `json:"-"` 会导致反序列化时被跳过，凭证永远为空。现用独立 request struct 接收后映射到 model；新增 name/provider 非空校验，status 默认 active；补充 `strings` 导入
+  - `frontend/src/components/cloud/CloudAccountManager.tsx` — 「添加账号」按钮接入创建表单 Dialog（账号名称/云平台/AccessKey/SecretKey/月费用/状态），提交调用 cloudApi.createAccount 后刷新列表；移除无 handler 的刷新/编辑按钮（编辑需后端新增 PUT 端点，留待后续）；按钮 disabled 校验（名称必填）
+- **结果**:
+  - `go build ./cmd/` 编译通过 ✅
+  - `npx tsc --noEmit` 类型检查通过 ✅
+  - `npm run build` 构建通过 ✅
+  - API 验证: POST /cloud-accounts → Code 200，DB 验证 access_key/secret_key 正确持久化（原 bug 下为空字符串）✅
+  - 联动验证: 新增账号后 dashboard month_cost 实时更新（95200→100200）✅
+  - 浏览器 UI 验证: 添加账号弹窗正常打开、字段填写、提交后列表刷新显示新账号 ✅
+  - 服务运行中: 后端:8080 + 前端:5173 ✅

frontend/src/components/cloud/CloudAccountManager.tsx

@@ -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>
   );
 }