91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useAppData } from '../context/AppDataContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { generateProfile } from '../utils/calculations';
|
|
import './Settings.css';
|
|
|
|
const Settings: React.FC = () => {
|
|
const { profile, saveProfile, clearData } = useAppData();
|
|
const navigate = useNavigate();
|
|
|
|
if (!profile) return null;
|
|
|
|
const [weight, setWeight] = useState(profile.weight.toString());
|
|
const [activity, setActivity] = useState(profile.activityLevel);
|
|
const [goal, setGoal] = useState(profile.goal);
|
|
|
|
const handleUpdate = () => {
|
|
if (window.confirm('更新體重/活動量會重新計算您的 TDEE 與每日營養目標，確定要更新嗎？')) {
|
|
const newProfile = generateProfile(
|
|
profile.height,
|
|
Number(weight),
|
|
profile.age,
|
|
profile.gender,
|
|
activity,
|
|
goal
|
|
);
|
|
saveProfile(newProfile);
|
|
alert('已更新您的營養目標！');
|
|
}
|
|
};
|
|
|
|
const handleReset = () => {
|
|
if (window.confirm('確定要清除所有資料嗎？這將會刪除您的個人檔案與所有歷史紀錄。')) {
|
|
clearData();
|
|
navigate('/onboarding');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="settings-container page-container animate-fade-in">
|
|
<header className="mb-4">
|
|
<h1>設定</h1>
|
|
</header>
|
|
|
|
<section className="glass-card mb-4">
|
|
<h2>個人狀態更新</h2>
|
|
<p style={{ fontSize: 13 }}>當前目標：{profile.targetCalories} kcal / 飲水：{profile.targetWater} ml</p>
|
|
|
|
<div className="form-group mt-4">
|
|
<label>目前體重 (kg)</label>
|
|
<input
|
|
type="number"
|
|
className="input-field"
|
|
value={weight}
|
|
onChange={(e) => setWeight(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label>活動量</label>
|
|
<select className="input-field" value={activity} onChange={(e) => setActivity(e.target.value as any)}>
|
|
<option value="sedentary">久坐 (辦公室/少運動)</option>
|
|
<option value="light">輕度活動 (每週運動1-3天)</option>
|
|
<option value="moderate">中度活動 (每週運動3-5天)</option>
|
|
<option value="active">高度活動 (每週運動6-7天)</option>
|
|
<option value="very_active">極度活動 (體力勞動/每天訓練2次)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label>目標</label>
|
|
<select className="input-field" value={goal} onChange={(e) => setGoal(e.target.value as any)}>
|
|
<option value="lose">減脂</option>
|
|
<option value="maintain">維持</option>
|
|
<option value="gain">增肌</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button className="btn-primary mt-2" onClick={handleUpdate}>重新計算目標</button>
|
|
</section>
|
|
|
|
<section className="glass-card danger-zone">
|
|
<h2>危險區域</h2>
|
|
<button className="btn-secondary danger-btn mt-2" onClick={handleReset}>清除所有資料並重新開始</button>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|