Feat/36(View&Controller): 补全了漏掉的api功能

[aice030]

变更背景和解决方案

1. 实现了编辑未开始的发布计划的api
2. 实现了新建发布任务的api
   关联issue: #
   issue feat(view&controller): View&Controller开发 #36

文档更新（架构文档、API文档、升级文档）

Checklist

• 确认是否有文档更新
• 确认是否自测
• 确认是否考虑兼容升级，不兼容升级需要有对应的解决方案
• 确认是否考虑添加监控指标
• API 设计是否符合 API 设计规范, 如果没有 API 变更，请忽略
• 我已经添加了相关人员到 Reviewers 列表中
• 我已经设置了 Development 关联的 Issue

[niupilot]

Code Review Complete ✅

Todo List:

• Gather context and understand PR changes
• Read modified files: client/src/api/index.ts and client/src/views/HomeView.vue
• Compare changes against develop branch
• Review code quality and best practices
• Check for potential bugs or issues
• Analyze architecture and design decisions
• Verify documentation consistency
• Provide comprehensive review feedback

---

📋 Review Summary

This PR implements the ability to edit unpublished deployment plans and create new deployment tasks with proper API integration and UI enhancements. The implementation is well-structured and follows existing patterns in the codebase.

✅ Strengths

1. Clean API Design

• REST-compliant endpoints following existing patterns
• Proper HTTP methods (POST for both create and update)
• Consistent parameter naming and structure
• Good error handling integration

2. Comprehensive UI Implementation

• Form Validation: Proper validation for required fields (service selection, version selection)
• User Experience: Clear error messages and success feedback
• State Management: Proper reactive state handling with Vue 3 Composition API
• Time Handling: Correct conversion between local and ISO time formats

3. Code Quality

• Follows existing Vue.js patterns and conventions
• Proper TypeScript usage with type safety
• Good separation of concerns
• Comprehensive error handling with try-catch blocks

⚠️ Areas for Improvement

1. API Consistency Issues (client/src/api/index.ts:126-137)

// Current implementation
updateDeployment: (deployID: string, data: {version?: string, scheduleTime?: string}) => {
  return api.post(`/v1/deployments/${deployID}`, data)
},

createDeployment: (data: {service: string, version: string, scheduleTime?: string}) => {
  return api.post('/v1/deployments', data)
}

Issues:

• HTTP Method Inconsistency: updateDeployment should use PUT or PATCH instead of POST for updates
• Missing Response Type Safety: Both functions should have proper TypeScript return types
• Parameter Validation: Consider adding runtime validation for required parameters

Suggested Fix:

updateDeployment: (deployID: string, data: {version?: string, scheduleTime?: string}): Promise<ApiResponse> => {
  return api.patch(`/v1/deployments/${deployID}`, data) // Use PATCH for partial updates
},

createDeployment: (data: {service: string, version: string, scheduleTime?: string}): Promise<ApiResponse> => {
  return api.post('/v1/deployments', data)
}

2. Form State Management (client/src/views/HomeView.vue:450-453)

const editForm = ref({
  scheduleTime: ''
})

Issues:

• Limited Form State: Only tracks scheduleTime, but the edit functionality might need to handle other fields in the future
• No Form Reset Method: Missing proper form reset functionality
• Type Safety: Form state lacks TypeScript interface definition

Suggested Enhancement:

interface EditFormState {
  scheduleTime: string;
  version?: string; // Future-proofing
  // Add other fields as needed
}

const editForm = ref<EditFormState>({
  scheduleTime: ''
})

const resetEditForm = () => {
  editForm.value = {
    scheduleTime: ''
  }
}

3. Time Format Handling (client/src/views/HomeView.vue:1127-1136)

// Manual time formatting - could be error-prone
if (release.scheduleTime) {
  const date = new Date(release.scheduleTime)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  editForm.value.scheduleTime = `${year}-${month}-${day}T${hours}:${minutes}`
}

Issues:

• Timezone Handling: No explicit timezone handling, could cause confusion
• Code Duplication: Similar time formatting logic exists elsewhere
• Error Handling: No validation for invalid date inputs

Suggested Refactor:

// Create a utility function
const formatDateTimeForInput = (dateString: string): string => {
  try {
    const date = new Date(dateString)
    if (isNaN(date.getTime())) {
      throw new Error('Invalid date')
    }
    return date.toISOString().slice(0, 16) // YYYY-MM-DDTHH:MM format
  } catch (error) {
    console.error('Date formatting error:', error)
    return ''
  }
}

// Usage
editForm.value.scheduleTime = release.scheduleTime ? formatDateTimeForInput(release.scheduleTime) : ''

4. Error Handling Enhancement (client/src/views/HomeView.vue:1151-1161)

} catch (error) {
  console.error('更新部署计划失败:', error)
  ElMessage.error('更新部署计划失败')
}

Issues:

• Generic Error Messages: User doesn't know why the operation failed
• No Retry Mechanism: No way to retry failed operations
• Limited Error Logging: Could benefit from more detailed error information

Suggested Enhancement:

} catch (error: any) {
  console.error('更新部署计划失败:', error)
  
  // Provide more specific error messages
  let errorMessage = '更新部署计划失败'
  if (error.response?.status === 404) {
    errorMessage = '部署计划不存在'
  } else if (error.response?.status === 400) {
    errorMessage = '请求参数错误，请检查输入'
  } else if (error.response?.status >= 500) {
    errorMessage = '服务器错误，请稍后重试'
  }
  
  ElMessage.error(errorMessage)
}

🏗️ Architecture & Design

Positive Design Decisions:

1. Separation of Concerns: API layer properly separated from UI logic
2. Reactive State Management: Proper use of Vue 3 reactivity
3. Component Reusability: Dialog components follow existing patterns
4. Consistent Styling: New styles match existing design system

Suggestions for Future Enhancement:

1. Service Layer: Consider introducing a service layer between API and components for business logic
2. Form Validation: Implement more robust client-side validation
3. Loading States: Add loading indicators for better UX during API calls
4. Optimistic Updates: Consider optimistic UI updates for better perceived performance

📖 Documentation Consistency

✅ Good:

• Code is well-commented in Chinese (consistent with existing codebase)
• Function names are descriptive and follow existing patterns
• API endpoints follow RESTful conventions

⚠️ Could Improve:

• Consider adding JSDoc comments for the new API functions
• README.md updates may be needed if this introduces new user workflows

🔍 Security Considerations

✅ Good Security Practices:

• Proper input validation on form submission
• ISO date format conversion prevents injection issues
• Error messages don't expose sensitive information

🚀 Testing Recommendations

1. Unit Tests: Add tests for the new API functions
2. Integration Tests: Test the edit dialog workflow end-to-end
3. Edge Cases: Test with invalid dates, network failures, and permission errors
4. User Experience: Test timezone handling across different locales

📝 Minor Issues

1. client/src/views/HomeView.vue:850: The comment "保留服务名称字段" suggests this was added for a specific reason - ensure this is intentional
2. Inconsistent spacing: Some areas could benefit from consistent spacing around operators
3. Console.log statements: Consider removing or replacing with proper logging in production

---

🎯 Overall Assessment: APPROVED ✅

This is a well-implemented feature that follows good coding practices and integrates cleanly with the existing codebase. The main concerns are around API consistency and error handling, which are relatively minor and can be addressed in future iterations.

Recommendation: Approve this PR with the understanding that the suggested improvements can be addressed in follow-up PRs or during code refactoring sessions.

👉 Want me to re-run this review? Just type /review in the comments! For more usage examples, visit CodeAgent GitHub Repository.

[gemini-code-assist]

Summary of Changes

Hello @aice030, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在补全系统中缺失的API功能，特别是针对发布计划的编辑和创建操作。它通过在客户端API服务中引入新的接口，并在HomeView组件中实现相应的用户界面和业务逻辑，使得用户能够更灵活地管理和调度部署计划。这些变更提升了系统的完整性和用户体验，确保了发布流程的顺畅进行。

Highlights

• 新增API功能: 在客户端API服务中新增了用于更新部署计划和创建部署计划的API接口。
• 编辑部署计划UI: 在HomeView页面中添加了一个新的对话框，用于编辑未开始的发布计划，包括服务名称、版本号和计划发布时间等字段。
• 创建发布计划逻辑: 重构了创建发布计划的逻辑，现在会调用新的API接口，并增加了表单验证和成功后的数据刷新机制。
• 编辑发布计划逻辑: 实现了编辑发布计划的功能，包括打开编辑对话框、初始化表单数据以及调用新的API接口保存修改。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[github-actions]

🚀 Frontend deployed successfully!

📱 Preview URL: https://zeroops-75ar752ku-liuscrafts-projects.vercel.app

✅ Build completed successfully

[gemini-code-assist]

Code Review

本次 PR 实现了创建和编辑发布计划的功能，代码实现清晰。主要反馈集中在 TypeScript 类型安全、异步代码中的竞态条件风险、错误处理的优化以及代码可读性方面。通过使用更精确的类型、缓存变量来避免竞态条件、提供更详细的错误信息以及封装辅助函数，可以进一步提升代码的健壮性和可维护性。