169 lines
5.8 KiB
Markdown
169 lines
5.8 KiB
Markdown
# 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 检查，无错误或警告。
|
||
|