增加修改和删除功能

life-script/src/views/TimelineView.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Plus, Wind, Sparkles } from 'lucide-react';
+import { Plus, Wind, Sparkles, Pencil, Trash2 } from 'lucide-react';
 import { GlassCard, GlassButton, GlassInput, GlassTextarea } from '../components/ui';
 import Modal from '../components/Modal';
 import useStore from '../store/useStore';
@@ -79,7 +79,7 @@ const FeedbackContent = ({ content }) => {
  * 人生轨迹视图，显示和管理生命事件
  */
 const TimelineView = () => {
-  const { lifeEvents, addLifeEvent, loadLifeEvents } = useStore();
+  const { lifeEvents, addLifeEvent, updateLifeEvent, deleteLifeEvent, loadLifeEvents } = useStore();
 
   // 加载生命事件
   useEffect(() => {
@@ -87,11 +87,17 @@ const TimelineView = () => {
       // 后端不可用时忽略错误
     });
   }, [loadLifeEvents]);
-  
+
   // 模态框状态
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  
+
+  // 编辑模式状态：null 表示新增模式，有值表示编辑模式（存储事件 ID）
+  const [editingEventId, setEditingEventId] = useState(null);
+
+  // 删除确认状态
+  const [deleteConfirmId, setDeleteConfirmId] = useState(null);
+
   // 表单状态
   const [eventForm, setEventForm] = useState({
     title: '',
@@ -100,7 +106,39 @@ const TimelineView = () => {
   });
 
   /**
-   * 处理表单提交
+   * 打开新增模态框
+   */
+  const openAddModal = () => {
+    setEditingEventId(null);
+    setEventForm({ title: '', time: '', content: '' });
+    setIsModalOpen(true);
+  };
+
+  /**
+   * 打开编辑模态框
+   * @param {Object} event - 要编辑的事件
+   */
+  const openEditModal = (event) => {
+    setEditingEventId(event.id);
+    setEventForm({
+      title: event.title || '',
+      time: event.time || '',
+      content: event.content || ''
+    });
+    setIsModalOpen(true);
+  };
+
+  /**
+   * 关闭模态框
+   */
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setEditingEventId(null);
+    setEventForm({ title: '', time: '', content: '' });
+  };
+
+  /**
+   * 处理表单提交（新增或编辑）
    */
   const handleSubmit = async () => {
     if (!eventForm.title || !eventForm.time || !eventForm.content) {
@@ -109,23 +147,45 @@ const TimelineView = () => {
     }
 
     setIsLoading(true);
-    
+
     try {
-      // 直接调用后端添加事件，由后端调用AI进行疗愈分析
-      await addLifeEvent({
-        ...eventForm
-      });
-      
+      if (editingEventId) {
+        // 编辑模式：调用更新接口
+        await updateLifeEvent({
+          id: editingEventId,
+          ...eventForm
+        });
+      } else {
+        // 新增模式：调用添加接口
+        await addLifeEvent({
+          ...eventForm
+        });
+      }
+
       // 重置表单并关闭模态框
-      setEventForm({ title: '', time: '', content: '' });
-      setIsModalOpen(false);
+      closeModal();
     } catch (error) {
-      console.error('Failed to add event:', error);
+      console.error('Failed to save event:', error);
     } finally {
       setIsLoading(false);
     }
   };
 
+  /**
+   * 处理删除确认
+   * @param {string} id - 事件ID
+   */
+  const handleDeleteConfirm = async (id) => {
+    try {
+      await deleteLifeEvent(id);
+      setDeleteConfirmId(null);
+    } catch (error) {
+      console.error('Failed to delete event:', error);
+      alert('删除失败，请稍后重试');
+      setDeleteConfirmId(null);
+    }
+  };
+
   /**
    * 按事件时间倒序排列（最新的在最上面）
    * 空日期的事件排在最后
@@ -149,7 +209,7 @@ const TimelineView = () => {
           <p className="text-sm text-white/30 mt-2">塑造你的每一刻，都被星辰见证。</p>
         </div>
         <GlassButton
-          onClick={() => setIsModalOpen(true)}
+          onClick={openAddModal}
           className="px-6 py-3 rounded-full text-sm font-bold flex items-center gap-2 bg-orange-200/5 text-orange-200 border-orange-200/20 shadow-lg"
         >
           <Plus className="w-4 h-4" /> 记录足迹
@@ -159,17 +219,35 @@ const TimelineView = () => {
       {/* 时间线容器 */}
       <div className="relative pl-8">
         {sortedEvents.length > 0 && <div className="timeline-line" />}
-        
+
         <div className="space-y-10">
           {sortedEvents.length > 0 ? (
             sortedEvents.map((event) => (
               <div key={event.id} className="relative group">
                 {/* 时间线点 */}
                 <div className="timeline-dot absolute left-[-39px] top-6 z-10" />
-                
+
                 {/* 事件卡片 */}
-                <GlassCard className="border-white/5 hover:border-orange-200/20 transition-all duration-700">
-                  <div className="flex justify-between items-start mb-4">
+                <GlassCard className="border-white/5 hover:border-orange-200/20 transition-all duration-700 relative">
+                  {/* 操作按钮 */}
+                  <div className="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                    <button
+                      onClick={() => openEditModal(event)}
+                      className="p-2 rounded-full bg-white/5 hover:bg-orange-200/10 text-white/30 hover:text-orange-200 transition-all"
+                      title="修改足迹"
+                    >
+                      <Pencil className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => setDeleteConfirmId(event.id)}
+                      className="p-2 rounded-full bg-white/5 hover:bg-red-400/10 text-white/30 hover:text-red-400 transition-all"
+                      title="删除足迹"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+
+                  <div className="flex justify-between items-start mb-4 pr-20">
                     <div className="flex items-center gap-3">
                       <h4 className="text-xl font-medium text-white/80">{event.title}</h4>
                       {event.tags && event.tags.length > 0 && (
@@ -185,7 +263,7 @@ const TimelineView = () => {
                   <p className="text-sm text-white/60 leading-relaxed mb-6">
                     {event.content}
                   </p>
-                  
+
                   {/* AI 反馈区域 - 仅在有反馈时显示 */}
                   {event.aiFeedback && (
                     <div className="ai-glow-card p-5 rounded-2xl bg-orange-200/[0.02] border border-orange-200/5">
@@ -211,8 +289,8 @@ const TimelineView = () => {
         </div>
       </div>
 
-      {/* 添加事件模态框 */}
-      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title="记录足迹">
+      {/* 添加/编辑事件模态框 */}
+      <Modal isOpen={isModalOpen} onClose={closeModal} title={editingEventId ? '修改足迹' : '记录足迹'}>
         <div className="space-y-6">
           <GlassInput
             label="事件标题"
@@ -243,6 +321,30 @@ const TimelineView = () => {
           </GlassButton>
         </div>
       </Modal>
+
+      {/* 删除确认模态框 */}
+      <Modal isOpen={!!deleteConfirmId} onClose={() => setDeleteConfirmId(null)} title="确认删除" maxWidth="sm">
+        <div className="space-y-6">
+          <p className="text-white/70 text-sm">
+            确定要删除这段人生足迹吗？此操作不可恢复，相关的 AI 洞察也将被删除。
+          </p>
+          <div className="flex gap-4">
+            <GlassButton
+              onClick={() => setDeleteConfirmId(null)}
+              className="flex-1"
+            >
+              取消
+            </GlassButton>
+            <GlassButton
+              variant="primary"
+              onClick={() => handleDeleteConfirm(deleteConfirmId)}
+              className="flex-1 bg-red-500/10 text-red-400 border-red-400/20 hover:bg-red-500/20"
+            >
+              确认删除
+            </GlassButton>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 };