前端重构实现
This commit is contained in:
@@ -0,0 +1,214 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Settings, Settings2 } from 'lucide-react';
|
||||
import Modal from '../components/Modal';
|
||||
import { GlassButton, GlassInput } from '../components/ui';
|
||||
import useStore from '../store/useStore';
|
||||
|
||||
/**
|
||||
* ProfileModal 组件
|
||||
* 用户资料模态框，支持查看和编辑模式
|
||||
* @param {Object} props
|
||||
* @param {boolean} props.isOpen - 是否打开
|
||||
* @param {Function} props.onClose - 关闭回调
|
||||
*/
|
||||
const ProfileModal = ({ isOpen, onClose }) => {
|
||||
const { registrationData, lifeEvents, scripts, updateRegistration, saveUserProfile, clear } = useStore();
|
||||
|
||||
// 编辑模式状态
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// 编辑表单状态
|
||||
const [editForm, setEditForm] = useState({
|
||||
nickname: registrationData.nickname,
|
||||
profession: registrationData.profession || '',
|
||||
mbti: registrationData.mbti,
|
||||
zodiac: registrationData.zodiac,
|
||||
hobbies: registrationData.hobbies?.join(', ') || ''
|
||||
});
|
||||
|
||||
// 同步 registrationData 到 editForm
|
||||
useEffect(() => {
|
||||
setEditForm({
|
||||
nickname: registrationData.nickname,
|
||||
profession: registrationData.profession || '',
|
||||
mbti: registrationData.mbti,
|
||||
zodiac: registrationData.zodiac,
|
||||
hobbies: registrationData.hobbies?.join(', ') || ''
|
||||
});
|
||||
}, [registrationData]);
|
||||
|
||||
/**
|
||||
* 处理保存
|
||||
*/
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
updateRegistration({
|
||||
nickname: editForm.nickname,
|
||||
profession: editForm.profession,
|
||||
mbti: editForm.mbti,
|
||||
zodiac: editForm.zodiac,
|
||||
hobbies: editForm.hobbies.split(',').map(s => s.trim()).filter(s => s)
|
||||
});
|
||||
await saveUserProfile();
|
||||
setIsEditing(false);
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
// 即使后端保存失败，本地已更新
|
||||
setIsEditing(false);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理取消编辑
|
||||
*/
|
||||
const handleCancel = () => {
|
||||
setEditForm({
|
||||
nickname: registrationData.nickname,
|
||||
profession: registrationData.profession || '',
|
||||
mbti: registrationData.mbti,
|
||||
zodiac: registrationData.zodiac,
|
||||
hobbies: registrationData.hobbies?.join(', ') || ''
|
||||
});
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理清除数据
|
||||
*/
|
||||
const handleClear = () => {
|
||||
if (confirm('确定要删除所有记录吗？此操作不可逆。')) {
|
||||
clear();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 渲染查看模式
|
||||
*/
|
||||
const renderViewMode = () => (
|
||||
<div className="animate-fade-in space-y-8">
|
||||
{/* 用户头像和基本信息 */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-orange-400/20 to-orange-600/20 flex items-center justify-center text-3xl border border-white/10">
|
||||
{(registrationData.nickname || '人').charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-2xl font-serif text-white/90">
|
||||
{registrationData.nickname || '旅行者'}
|
||||
</h4>
|
||||
<p className="text-[10px] text-white/30 uppercase tracking-[0.2em] mt-1">
|
||||
{registrationData.mbti || '-'} | {registrationData.zodiac || '-'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计数据 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-white/[0.02] rounded-2xl border border-white/5 text-center">
|
||||
<div className="text-lg font-serif text-orange-200">{lifeEvents.length}</div>
|
||||
<div className="text-[9px] text-white/30 uppercase tracking-widest mt-1">生命足迹</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white/[0.02] rounded-2xl border border-white/5 text-center">
|
||||
<div className="text-lg font-serif text-blue-200">{scripts.length}</div>
|
||||
<div className="text-[9px] text-white/30 uppercase tracking-widest mt-1">天命卷轴</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="space-y-4 pt-4 border-t border-white/5">
|
||||
<GlassButton
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="w-full py-4 text-sm font-bold flex gap-3 items-center justify-center"
|
||||
>
|
||||
<Settings className="w-4 h-4" /> 编辑资料
|
||||
</GlassButton>
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="w-full py-4 text-[10px] text-red-400/40 hover:text-red-400 uppercase tracking-widest transition-colors"
|
||||
>
|
||||
清除数据并退出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
/**
|
||||
* 渲染编辑模式
|
||||
*/
|
||||
const renderEditMode = () => (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
{/* 编辑标题 */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-12 h-12 rounded-full bg-orange-200/10 flex items-center justify-center">
|
||||
<Settings2 className="text-orange-200 w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-serif">个人设定</h4>
|
||||
<p className="text-xs text-white/40">在这里调整你的人生航向基础信息</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 编辑表单 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6">
|
||||
<GlassInput
|
||||
label="昵称"
|
||||
placeholder="你想被如何称呼？"
|
||||
value={editForm.nickname}
|
||||
onChange={(v) => setEditForm(prev => ({ ...prev, nickname: v }))}
|
||||
/>
|
||||
<GlassInput
|
||||
label="职业"
|
||||
placeholder="你当下的社会锚点"
|
||||
value={editForm.profession}
|
||||
onChange={(v) => setEditForm(prev => ({ ...prev, profession: v }))}
|
||||
/>
|
||||
<GlassInput
|
||||
label="MBTI"
|
||||
placeholder="性格色彩"
|
||||
value={editForm.mbti}
|
||||
onChange={(v) => setEditForm(prev => ({ ...prev, mbti: v }))}
|
||||
/>
|
||||
<GlassInput
|
||||
label="星座"
|
||||
placeholder="星辰指引"
|
||||
value={editForm.zodiac}
|
||||
onChange={(v) => setEditForm(prev => ({ ...prev, zodiac: v }))}
|
||||
/>
|
||||
</div>
|
||||
<GlassInput
|
||||
label="兴趣爱好"
|
||||
placeholder="让灵魂起舞的事物"
|
||||
value={editForm.hobbies}
|
||||
onChange={(v) => setEditForm(prev => ({ ...prev, hobbies: v }))}
|
||||
/>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex gap-4 mt-8 pt-6 border-t border-white/5">
|
||||
<GlassButton
|
||||
onClick={handleSave}
|
||||
loading={isSaving}
|
||||
className="flex-1 py-3 bg-orange-200/10 text-orange-100 font-bold tracking-widest"
|
||||
>
|
||||
保存修改
|
||||
</GlassButton>
|
||||
<GlassButton
|
||||
onClick={handleCancel}
|
||||
className="px-6 py-3 text-white/40"
|
||||
>
|
||||
返回
|
||||
</GlassButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
{isEditing ? renderEditMode() : renderViewMode()}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileModal;
|
||||
Reference in New Issue
Block a user