ver.1

src/pages/Settings.tsx

@@ -0,0 +1,90 @@
+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;