增加创建和更新计划基本信息的界面

frontend/src/pages/FeedPlan.vue

@@ -60,17 +60,43 @@
         </div>
       </div>
     </main>
+    
+    <!-- 计划表单模态框 -->
+    <div v-if="showModal" class="modal-overlay" @click="closeModal">
+      <div class="modal-content" @click.stop>
+        <FeedPlanForm
+          :initial-data="currentPlan"
+          :is-edit-mode="modalType === 'edit'"
+          :loading="submitting"
+          @submit="submitForm"
+          @cancel="closeModal"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import FeedPlanForm from '../components/FeedPlanForm.vue'
+
 export default {
   name: 'FeedPlan',
+  components: {
+    FeedPlanForm
+  },
   data() {
     return {
       username: '',
       plans: [],
-      loading: true
+      loading: true,
+      // 控制模态框显示
+      showModal: false,
+      // 当前操作类型: 'create' 或 'edit'
+      modalType: 'create',
+      // 当前编辑的计划
+      currentPlan: null,
+      // 提交时的加载状态
+      submitting: false
     }
   },
   
@@ -113,14 +139,75 @@ export default {
     
     // 创建计划
     createPlan() {
-      // TODO: 实现创建计划逻辑
-      alert('创建计划功能待实现')
+      this.modalType = 'create'
+      this.currentPlan = {
+        name: '',
+        description: '',
+        type: 'manual',
+        enabled: true,
+        schedule_cron: '',
+        execution_limit: 0
+      }
+      this.showModal = true
     },
     
     // 编辑计划
     editPlan(plan) {
-      // TODO: 实现编辑计划逻辑
-      alert(`编辑计划: ${plan.name}`)
+      this.modalType = 'edit'
+      // 深拷贝计划数据，避免直接修改原数据
+      this.currentPlan = JSON.parse(JSON.stringify(plan))
+      this.showModal = true
+    },
+    
+    // 关闭模态框
+    closeModal() {
+      this.showModal = false
+      this.currentPlan = null
+    },
+    
+    // 提交表单
+    async submitForm(formData) {
+      // 防止重复提交
+      if (this.submitting) {
+        return
+      }
+      
+      this.submitting = true
+      try {
+        let url, method
+        if (this.modalType === 'create') {
+          url = '/api/v1/feed/plan/create'
+          method = 'POST'
+        } else {
+          url = '/api/v1/feed/plan/update'
+          method = 'POST'
+        }
+        
+        const response = await fetch(url, {
+          method: method,
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + localStorage.getItem('authToken')
+          },
+          body: JSON.stringify(formData)
+        })
+        
+        const data = await response.json()
+        
+        if (response.ok && data.code === 0) {
+          // 提交成功，关闭模态框并重新加载列表
+          this.closeModal()
+          await this.loadPlans()
+          alert(this.modalType === 'create' ? '创建计划成功' : '更新计划成功')
+        } else {
+          alert((this.modalType === 'create' ? '创建计划失败: ' : '更新计划失败: ') + (data.message || '未知错误'))
+        }
+      } catch (error) {
+        console.error(this.modalType === 'create' ? '创建计划失败:' : '更新计划失败:', error)
+        alert((this.modalType === 'create' ? '创建计划失败: ' : '更新计划失败: ') + error.message)
+      } finally {
+        this.submitting = false
+      }
     },
     
     // 删除计划
@@ -400,4 +487,28 @@ export default {
     flex-direction: column;
   }
 }
+
+/* 模态框样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
 </style>