peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加修改和删除功能

Browse Source
This commit is contained in:
huazhongmin
2025-12-24 15:20:58 +08:00
parent 1aa39e11b4
commit 31cc78038b
26 changed files with 707 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files
life-script/src/views/PathView.jsx
+101 -50
View File
@@ -1,7 +1,8 @@
import { useState, useEffect } from 'react';
import { Map, Loader2 } from 'lucide-react';
import { Map, Loader2, Trash2 } from 'lucide-react';
import { motion } from 'framer-motion';
import { GlassCard, GlassButton } from '../components/ui';
import Modal from '../components/Modal';
import useStore from '../store/useStore';
import { generatePath } from '../services/ai';
@@ -12,8 +13,9 @@ import { generatePath } from '../services/ai';
* @param {Function} props.onGoToScript - 跳转到剧本视图回调
*/
const PathView = ({ onGoToScript }) => {
const { getSelectedScript, selectedPath, setPath, loadPath, selectedScriptId } = useStore();
const { getSelectedScript, selectedPath, setPath, loadPath, deletePath, selectedScriptId } = useStore();
const [isLoading, setIsLoading] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const selectedScript = getSelectedScript();
@@ -44,6 +46,18 @@ const PathView = ({ onGoToScript }) => {
}
};
/**
* 处理删除路径
*/
const handleDelete = async () => {
try {
await deletePath(selectedScriptId);
setShowDeleteConfirm(false);
} catch (error) {
console.error('Failed to delete path:', error);
}
};
/**
* 解析路径内容为步骤数组
*/
@@ -82,61 +96,98 @@ const PathView = ({ onGoToScript }) => {
}
return (
<div className="max-w-3xl mx-auto space-y-12 pb-20">
{/* 标题区域 */}
<div className="flex justify-between items-end">
<div>
<h3 className="text-4xl font-serif">实现路径</h3>
<p className="text-sm text-white/30 mt-2">
基于《{selectedScript.theme}》，拆解达成目标的每一步。
</p>
<>
<div className="max-w-3xl mx-auto space-y-12 pb-20">
{/* 标题区域 */}
<div className="flex justify-between items-end">
<div>
<h3 className="text-4xl font-serif">实现路径</h3>
<p className="text-sm text-white/30 mt-2">
基于《{selectedScript.theme}》，拆解达成目标的每一步。
</p>
</div>
<div className="flex gap-3">
{selectedPath && (
<GlassButton
onClick={() => setShowDeleteConfirm(true)}
className="px-4 py-3 rounded-full text-sm bg-red-400/5 text-red-300 border-red-400/20 hover:bg-red-400/10"
title="删除路径"
>
<Trash2 className="w-4 h-4" />
</GlassButton>
)}
<GlassButton
onClick={handleGenerate}
disabled={isLoading}
className="px-8 py-3 rounded-full text-sm font-bold bg-blue-400/5 text-blue-300 border-blue-400/20"
>
{isLoading ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
规划中...
</>
) : (
selectedPath ? '重新推演' : '开启人生导航'
)}
</GlassButton>
</div>
</div>
<GlassButton
onClick={handleGenerate}
disabled={isLoading}
className="px-8 py-3 rounded-full text-sm font-bold bg-blue-400/5 text-blue-300 border-blue-400/20"
>
{isLoading ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
规划中...
</>
{/* 路径步骤展示 */}
<div className="space-y-6">
{pathSteps.length > 0 ? (
pathSteps.map((step, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1, duration: 0.5 }}
>
<GlassCard className="border-l-4 border-l-blue-400/40 bg-blue-400/[0.01]" padding="lg">
<h5 className="text-blue-200 font-bold mb-4 flex items-center gap-3">
<span className="w-6 h-6 rounded-full bg-blue-400/20 text-[10px] flex items-center justify-center">
{step.index}
</span>
{step.title}
</h5>
<div className="text-white/60 text-sm leading-relaxed whitespace-pre-wrap">
{step.content}
</div>
</GlassCard>
</motion.div>
))
) : (
selectedPath ? '重新推演' : '开启人生导航'
<div className="py-20 text-center text-white/20 italic font-serif">
等待开启人生导航...
</div>
)}
</GlassButton>
</div>
</div>
{/* 路径步骤展示 */}
<div className="space-y-6">
{pathSteps.length > 0 ? (
pathSteps.map((step, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1, duration: 0.5 }}
{/* 删除确认模态框 */}
<Modal isOpen={showDeleteConfirm} onClose={() => setShowDeleteConfirm(false)} title="确认删除" maxWidth="sm">
<div className="space-y-6">
<p className="text-white/70 text-sm">
确定要删除当前的实现路径吗？此操作不可恢复。
</p>
<div className="flex gap-4">
<GlassButton
onClick={() => setShowDeleteConfirm(false)}
className="flex-1"
>
<GlassCard className="border-l-4 border-l-blue-400/40 bg-blue-400/[0.01]" padding="lg">
<h5 className="text-blue-200 font-bold mb-4 flex items-center gap-3">
<span className="w-6 h-6 rounded-full bg-blue-400/20 text-[10px] flex items-center justify-center">
{step.index}
</span>
{step.title}
</h5>
<div className="text-white/60 text-sm leading-relaxed whitespace-pre-wrap">
{step.content}
</div>
</GlassCard>
</motion.div>
))
) : (
<div className="py-20 text-center text-white/20 italic font-serif">
等待开启人生导航...
取消
</GlassButton>
<GlassButton
variant="primary"
onClick={handleDelete}
className="flex-1 bg-red-500/10 text-red-400 border-red-400/20 hover:bg-red-500/20"
>
确认删除
</GlassButton>
</div>
)}
</div>
</div>
</div>
</Modal>
</>
);
};
life-script/src/views/ScriptView.jsx
+188 -22
View File
@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { UserCog, PenTool, Sparkles, BookOpen, Loader2 } from 'lucide-react';
import { UserCog, PenTool, Sparkles, BookOpen, Loader2, Pencil, Trash2 } from 'lucide-react';
import { GlassCard, GlassButton, GlassInput, GlassSelect } from '../components/ui';
import Modal from '../components/Modal';
import useStore from '../store/useStore';
import { scriptStyles, scriptLengths } from '../utils/constants';
@@ -11,12 +12,14 @@ import { scriptStyles, scriptLengths } from '../utils/constants';
* @param {Function} props.onOpenProfile - 打开用户资料模态框回调
*/
const ScriptView = ({ onOpenProfile }) => {
const {
registrationData,
lifeEvents,
scripts,
selectedScriptId,
addScript,
const {
registrationData,
lifeEvents,
scripts,
selectedScriptId,
addScript,
updateScript,
deleteScript,
setSelectedScriptId,
getSelectedScript,
loadScripts
@@ -35,6 +38,18 @@ const ScriptView = ({ onOpenProfile }) => {
const [length, setLength] = useState(scriptLengths[0].value);
const [isLoading, setIsLoading] = useState(false);
// 编辑模态框状态
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [editingScript, setEditingScript] = useState(null);
const [editForm, setEditForm] = useState({
theme: '',
style: '',
length: ''
});
// 删除确认状态
const [deleteConfirmId, setDeleteConfirmId] = useState(null);
/**
* 处理剧本生成
*/
@@ -45,17 +60,17 @@ const ScriptView = ({ onOpenProfile }) => {
}
setIsLoading(true);
try {
// 直接调用后端创建接口，由后端调用AI生成
await addScript({
theme,
style,
length,
await addScript({
theme,
style,
length,
character: registrationData,
events: lifeEvents
});
setTheme('');
} catch (error) {
console.error('Failed to generate script:', error);
@@ -64,6 +79,73 @@ const ScriptView = ({ onOpenProfile }) => {
}
};
/**
* 打开编辑模态框
* @param {Object} script - 要编辑的剧本
*/
const openEditModal = (script) => {
setEditingScript(script);
setEditForm({
theme: script.theme || '',
style: script.style || scriptStyles[0].value,
length: script.length || scriptLengths[0].value
});
setIsEditModalOpen(true);
};
/**
* 关闭编辑模态框
*/
const closeEditModal = () => {
setIsEditModalOpen(false);
setEditingScript(null);
setEditForm({ theme: '', style: '', length: '' });
};
/**
* 处理编辑提交
*/
const handleEditSubmit = async () => {
if (!editForm.theme) {
alert('请输入主题');
return;
}
setIsLoading(true);
try {
await updateScript({
id: editingScript.id,
theme: editForm.theme,
style: editForm.style,
length: editForm.length,
character: registrationData,
events: lifeEvents,
regenerateContent: true // 标记需要重新生成AI内容
});
closeEditModal();
} catch (error) {
console.error('Failed to update script:', error);
} finally {
setIsLoading(false);
}
};
/**
* 处理删除确认
* @param {string} id - 剧本ID
*/
const handleDeleteConfirm = async (id) => {
try {
await deleteScript(id);
setDeleteConfirmId(null);
} catch (error) {
console.error('Failed to delete script:', error);
alert('删除失败，请稍后重试');
setDeleteConfirmId(null);
}
};
/**
* 格式化剧本内容，高亮【标题】
*/
@@ -165,16 +247,35 @@ const ScriptView = ({ onOpenProfile }) => {
scripts.map((script) => (
<div
key={script.id}
onClick={() => setSelectedScriptId(script.id)}
className={`
p-3 glass-card text-left cursor-pointer hover:bg-white/5 border-white/5 transition-all
p-3 glass-card text-left cursor-pointer hover:bg-white/5 border-white/5 transition-all relative group
${script.id === selectedScriptId ? 'border-orange-200/30 bg-orange-200/5' : ''}
`}
>
<div className="text-[11px] text-white/80 truncate">{script.theme}</div>
<div className="text-[9px] text-white/30 flex justify-between mt-1">
<span>{script.style} | {script.length}</span>
<span>{script.date}</span>
{/* 操作按钮 */}
<div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={(e) => { e.stopPropagation(); openEditModal(script); }}
className="p-1.5 rounded-full bg-white/5 hover:bg-orange-200/10 text-white/30 hover:text-orange-200 transition-all"
title="编辑"
>
<Pencil className="w-3 h-3" />
</button>
<button
onClick={(e) => { e.stopPropagation(); setDeleteConfirmId(script.id); }}
className="p-1.5 rounded-full bg-white/5 hover:bg-red-400/10 text-white/30 hover:text-red-400 transition-all"
title="删除"
>
<Trash2 className="w-3 h-3" />
</button>
</div>
<div onClick={() => setSelectedScriptId(script.id)}>
<div className="text-[11px] text-white/80 truncate pr-12">{script.theme}</div>
<div className="text-[9px] text-white/30 flex justify-between mt-1">
<span>{script.style} | {script.length}</span>
<span>{script.date}</span>
</div>
</div>
</div>
))
@@ -189,9 +290,18 @@ const ScriptView = ({ onOpenProfile }) => {
<div className="lg:col-span-8">
<div className="h-full">
{selectedScript ? (
<GlassCard className="h-full overflow-y-auto custom-scrollbar border-orange-200/20 shadow-2xl animate-fade-in" padding="lg">
<GlassCard className="h-full overflow-y-auto custom-scrollbar border-orange-200/20 shadow-2xl animate-fade-in relative group" padding="lg">
{/* 编辑按钮 */}
<button
onClick={() => openEditModal(selectedScript)}
className="absolute top-4 right-4 p-2 rounded-full bg-white/5 hover:bg-orange-200/10 text-white/30 hover:text-orange-200 transition-all opacity-0 group-hover:opacity-100"
title="修改剧本"
>
<Pencil className="w-4 h-4" />
</button>
<div className="prose prose-invert max-w-none">
<div className="flex justify-between items-center mb-8 pb-4 border-b border-white/5">
<div className="flex justify-between items-center mb-8 pb-4 border-b border-white/5 pr-10">
<div>
<h4 className="text-2xl font-serif text-orange-200">{selectedScript.theme}</h4>
<p className="text-[10px] text-white/30 mt-1 uppercase tracking-widest">
@@ -200,7 +310,7 @@ const ScriptView = ({ onOpenProfile }) => {
</div>
<BookOpen className="text-white/20" />
</div>
<div
<div
className="text-white/70 leading-loose whitespace-pre-wrap space-y-6 text-sm"
dangerouslySetInnerHTML={{ __html: formatScriptContent(selectedScript.content) }}
/>
@@ -214,6 +324,62 @@ const ScriptView = ({ onOpenProfile }) => {
)}
</div>
</div>
{/* 编辑剧本模态框 */}
<Modal isOpen={isEditModalOpen} onClose={closeEditModal} title="修改剧本">
<div className="space-y-6">
<GlassInput
label="剧本主题"
placeholder="例如：我在职场逆袭了"
value={editForm.theme}
onChange={(v) => setEditForm(prev => ({ ...prev, theme: v }))}
/>
<GlassSelect
label="叙事风格"
options={scriptStyles}
value={editForm.style}
onChange={(v) => setEditForm(prev => ({ ...prev, style: v }))}
/>
<GlassSelect
label="剧本篇幅"
options={scriptLengths}
value={editForm.length}
onChange={(v) => setEditForm(prev => ({ ...prev, length: v }))}
/>
<GlassButton
variant="primary"
onClick={handleEditSubmit}
loading={isLoading}
className="w-full"
>
{isLoading ? '正在重新编撰...' : '重新生成剧本'}
</GlassButton>
</div>
</Modal>
{/* 删除确认模态框 */}
<Modal isOpen={!!deleteConfirmId} onClose={() => setDeleteConfirmId(null)} title="确认删除" maxWidth="sm">
<div className="space-y-6">
<p className="text-white/70 text-sm">
确定要删除这个剧本吗？此操作不可恢复，关联的实现路径也将被删除。
</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>
);
};
life-script/src/views/TimelineView.jsx
+124 -22
View File
@@ -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>
);
};