ocdp-go/docs/archive/root-cleanup/FRONTEND_SYNC_SUMMARY.md

Frontend 类型同步总结

概述

根据 backend 的最新 DTO 定义，对 frontend 的类型定义和组件代码进行了全面更新，确保前后端数据结构一致。

修改的文件

1. 核心类型定义

/frontend/src/core/types/index.ts

• Cluster 接口:

  • 将 has_ca_data, has_cert_data, has_key_data, has_token 改为 camelCase: hasCAData, hasCertData, hasKeyData, hasToken
  • 将 ca_data, cert_data, key_data 改为 camelCase: caData, certData, keyData

• AppRegistry 接口:

  • 将 has_password 改为 camelCase: hasPassword
  • username 和 password 改为可选字段（与 backend DTO 一致）

• AppInstance 接口:

  • 使用 snake_case cluster_id 和 registry_id（与 backend DTO 一致）
  • 添加 chart 字段
  • 添加 version 字段
  • 添加 revision 字段

/frontend/src/core/api/instance.api.ts

• Instance 接口:
  • 将 clusterId 改为 cluster_id
  • 将 registryId 改为 registry_id
  • 添加 chart 字段
  • 将 tag 改为 version
  • 移除 notes 和 deployedAt（backend DTO 中不存在）

2. 配置组件

/frontend/src/features/configuration/clusters/components/ClusterForm.tsx

• 更新所有对 cluster.ca_data 的引用为 cluster.caData
• 更新所有对 cluster.cert_data 的引用为 cluster.certData
• 更新所有对 cluster.key_data 的引用为 cluster.keyData
• 更新所有对 cluster.has_ca_data 的引用为 cluster.hasCAData
• 更新所有对 cluster.has_cert_data 的引用为 cluster.hasCertData
• 更新所有对 cluster.has_key_data 的引用为 cluster.hasKeyData

/frontend/src/features/configuration/clusters/components/ClusterList.tsx

• 更新配置状态检查使用 camelCase 命名

/frontend/src/features/configuration/registries/components/RegistryForm.tsx

• 将 has_password 改为 hasPassword

3. 实例管理组件

/frontend/src/features/artifact/instances/components/EndpointsModal.tsx

• 将 instance.clusterId 改为 instance.cluster_id

/frontend/src/features/artifact/instances/pages/InstancesManagementPage.tsx

• 将所有 instance.clusterId 改为 instance.cluster_id

/frontend/src/features/artifact/instances/components/ModifyModal.tsx

• 将 instance.clusterId 改为 instance.cluster_id
• 将 instance.registryId 改为 instance.registry_id
• 将 instance.tag 改为 instance.version
• 更新显示文本从 "Current Tag" 改为 "Current Version"

/frontend/src/features/artifact/instances/components/InstanceCard.tsx

• 将 instance.tag 改为 instance.version

Backend DTO 参考

ClusterResponse

type ClusterResponse struct {
    ID          string `json:"id"`
    Name        string `json:"name"`
    Host        string `json:"host"`
    Description string `json:"description"`
    HasCAData   bool   `json:"hasCAData"`
    HasCertData bool   `json:"hasCertData"`
    HasKeyData  bool   `json:"hasKeyData"`
    HasToken    bool   `json:"hasToken"`
    CAData      string `json:"caData,omitempty"`
    CertData    string `json:"certData,omitempty"`
    KeyData     string `json:"keyData,omitempty"`
    Token       string `json:"token,omitempty"`
    CreatedAt   string `json:"createdAt"`
    UpdatedAt   string `json:"updatedAt"`
}

RegistryResponse

type RegistryResponse struct {
    ID          string `json:"id"`
    Name        string `json:"name"`
    URL         string `json:"url"`
    Description string `json:"description"`
    Username    string `json:"username,omitempty"`
    Password    string `json:"password,omitempty"`
    HasPassword bool   `json:"hasPassword"`
    Insecure    bool   `json:"insecure"`
    CreatedAt   string `json:"createdAt"`
    UpdatedAt   string `json:"updatedAt"`
}

InstanceResponse

type InstanceResponse struct {
    ID          string                 `json:"id"`
    ClusterID   string                 `json:"cluster_id"`
    Name        string                 `json:"name"`
    Namespace   string                 `json:"namespace"`
    RegistryID  string                 `json:"registry_id"`
    Repository  string                 `json:"repository"`
    Chart       string                 `json:"chart"`
    Version     string                 `json:"version"`
    Description string                 `json:"description"`
    Status      string                 `json:"status"`
    Revision    int                    `json:"revision"`
    Values      map[string]interface{} `json:"values,omitempty"`
    CreatedAt   string                 `json:"createdAt"`
    UpdatedAt   string                 `json:"updatedAt"`
}

命名约定总结

1. 响应字段（Response）：

   • Cluster 和 Registry: 使用 camelCase (如 hasCAData, hasCertData, hasPassword)
   • Instance: 混合使用，cluster_id 和 registry_id 使用 snake_case，其他字段使用 camelCase

2. 请求字段（Request）：

   • 使用 snake_case (如 ca_data, cert_data, key_data)
   • Backend 会接受这些字段并进行验证

验证步骤

1. 启动 Backend:

cd backend
make run-mock  # 或 make dev

2. 启动 Frontend:

cd frontend
npm install
npm run dev

3. 测试功能:
   • ✅ 创建/编辑集群配置
   • ✅ 查看集群证书配置状态
   • ✅ 创建/编辑 Registry 配置
   • ✅ 查看 Registry 密码配置状态
   • ✅ 部署应用实例
   • ✅ 查看实例详情（chart, version 等字段）
   • ✅ 修改/升级实例
   • ✅ 查看实例入口信息

注意事项

1. 向后兼容性: 如果有旧数据，可能需要数据迁移
2. GraphQL Schema: 如果使用 GraphQL，需要同步更新 schema
3. API 文档: 建议更新 API 文档以反映最新的字段命名

Linter 检查结果

✅ 所有修改的文件都通过了 linter 检查，无错误或警告。