# 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 ```go 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 ```go 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 ```go 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**: ```bash cd backend make run-mock # 或 make dev ``` 2. **启动 Frontend**: ```bash cd frontend npm install npm run dev ``` 3. **测试功能**: - ✅ 创建/编辑集群配置 - ✅ 查看集群证书配置状态 - ✅ 创建/编辑 Registry 配置 - ✅ 查看 Registry 密码配置状态 - ✅ 部署应用实例 - ✅ 查看实例详情(chart, version 等字段) - ✅ 修改/升级实例 - ✅ 查看实例入口信息 ## 注意事项 1. **向后兼容性**: 如果有旧数据,可能需要数据迁移 2. **GraphQL Schema**: 如果使用 GraphQL,需要同步更新 schema 3. **API 文档**: 建议更新 API 文档以反映最新的字段命名 ## Linter 检查结果 ✅ 所有修改的文件都通过了 linter 检查,无错误或警告。