import React, { useState, useEffect } from ‘react’;
import { initializeApp } from ‘firebase/app’;
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from ‘firebase/auth’;
import { getFirestore, doc, setDoc } from ‘firebase/firestore’;
// Ensure Tailwind CSS is available in the environment
// For local development, you might need to include:
//
const App = () => {
// Firebase related states
const [firebaseApp, setFirebaseApp] = useState(null);
const [db, setDb] = useState(null);
const [auth, setAuth] = useState(null);
const [userId, setUserId] = useState(null);
const [isAuthReady, setIsAuthReady] = useState(false);
// Questionnaire states
const [step, setStep] = useState(1);
const [formData, setFormData] = useState({
name: '',
age: '',
gender: '',
height: '', // in cm
weight: '', // in kg
livingArea: '',
// New multiple-choice fields
dietBreakfastType: '',
dietLunchType: '',
dietDinnerType: '',
fruitsDailyAmount: '',
vegetablesDailyAmount: '',
includesRawVegetables: false,
grainsConsumed: [], // Array for multiple selections
legumesConsumed: [],
nutsSeedsConsumed: [],
supplements: '', // Kept as text for specific names
foodsToAvoid: '', // Kept as text for specific allergies/aversions
eatingOutFrequency: '',
cookingMethod: '',
exerciseFrequency: '', // Kept as text for specific types/details
sleepQualityRating: '',
stressManagement: '', // Kept as text for specific methods
smokingAlcohol: '',
// Symptoms and Chronic Diseases (more detailed checkboxes and text areas)
symptomsEnergy: false,
symptomsDigestive: false,
symptomsSkinHairNail: false,
symptomsMoodCognitive: false,
symptomsImmune: false,
// Detailed symptoms by organ/system
symptomsEyeFatigue: false,
symptomsEyePain: false,
symptomsWateryEyes: false,
symptomsBlurredVision: false,
symptomsDryEyes: false,
symptomsEarRinging: false,
symptomsEarBlocked: false,
symptomsMouthDry: false,
symptomsMouthThirsty: false,
symptomsMouthPain: false,
symptomsTasteAbnormal: false,
symptomsThroatBlocked: false,
symptomsThroatForeignBody: false,
symptomsThroatItchy: false,
symptomsCoughAbnormal: false,
symptomsHandNumbness: false,
symptomsHandTremor: false,
symptomsHandPain: false,
symptomsHandSensationAbnormal: false,
symptomsLegNumbness: false,
symptomsLegPain: false,
symptomsMuscleTwitching: false,
symptomsNeckPain: false,
symptomsShoulderPain: false,
symptomsBackPain: false,
symptomsLowerBackPain: false,
symptomsJointFatigueWeakness: false,
symptomsBreathingDifficulty: false,
symptomsRespiratoryBlocked: false,
symptomsDeepBreathSigh: false,
symptomsEsophagusBlocked: false,
symptomsNauseaVomiting: false,
symptomsStomachDiscomfort: false,
symptomsAbdominalPain: false,
symptomsConstipationDiarrhea: false,
symptomsFrequentUrination: false,
symptomsUrinationDifficulty: false,
symptomsBedwetting: false,
symptomsSexualDysfunction: false,
symptomsExcessiveSweating: false,
symptomsNoSweat: false,
symptomsDrySkin: false,
symptomsSkinItchy: false,
symptomsGeneralFatigue: false,
symptomsGeneralWeakness: false,
symptomsLowFever: false,
symptomsLossOfAppetite: false,
symptomsSleepDisorder: false,
// Mental health conditions
symptomsDepression: false,
symptomsAnxiety: false,
symptomsBipolarDisorder: false,
symptomsOCD: false,
symptomsSchizophrenia: false,
symptomsOtherMentalDisorder: '',
symptomsOther: '', // General other symptoms
chronicDiseases: '', // General chronic diseases
autoimmuneConditions: '' // Specific autoimmune conditions
});
const [loading, setLoading] = useState(false);
const [analysisResult, setAnalysisResult] = useState(null);
const [error, setError] = useState(null);
// Initialize Firebase
useEffect(() => {
try {
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);
const authentication = getAuth(app);
setFirebaseApp(app);
setDb(firestore);
setAuth(authentication);
const unsubscribe = onAuthStateChanged(authentication, async (user) => {
if (user) {
setUserId(user.uid);
} else {
// Sign in anonymously if no user is authenticated
try {
if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
await signInWithCustomToken(authentication, __initial_auth_token);
} else {
await signInAnonymously(authentication);
}
} catch (authError) {
console.error("Firebase authentication error:", authError);
setError("无法登录到应用程序。请检查您的网络连接。");
}
}
setIsAuthReady(true); // Auth state is ready
});
return () => unsubscribe();
} catch (initError) {
console.error("Firebase initialization error:", initError);
setError("无法初始化应用程序。请检查配置。");
}
}, []);
const handleChange = (e) => {
const { name, value, type, checked } = e.target;
setFormData(prev => ({
...prev,
[name]: type === 'checkbox' ? checked : value
}));
};
// Handle multiple selection (checkboxes for arrays)
const handleMultiSelectChange = (e) => {
const { name, value, checked } = e.target;
setFormData(prev => {
const currentArray = prev[name];
if (checked) {
return { ...prev, [name]: [...currentArray, value] };
} else {
return { ...prev, [name]: currentArray.filter(item => item !== value) };
}
});
};
const nextStep = () => setStep(prev => prev + 1);
const prevStep = () => setStep(prev => prev - 1);
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setAnalysisResult(null);
setError(null);
if (!isAuthReady || !userId) {
setError("认证未准备好或用户ID不可用。请稍候再试。");
setLoading(false);
return;
}
// Construct the detailed prompt for the AI
const prompt = `
我是一位国际营养师，专注于营养免疫学。我的客户填写了以下问卷，请您根据这些信息，作为我的AI助手，为他们提供一份详细的营养分析报告。请严格遵守以下要求。本次分析将参考“救命”、“救命食谱”和“救命饮食”系列书籍的理念，确保分析和建议与全食物、植物性饮食的原则保持一致。
**报告内容要求：**
1. **可能缺乏的营养素：** 列出客户可能缺乏的营养素。
2. **缺乏原因分析：** 详细分析导致这些营养素缺乏的潜在原因，结合客户的饮食、生活方式、健康症状和已知疾病。
3. **改善方法：** 提供综合性的改善建议，包括生活方式调整和饮食习惯改变。
4. **推荐食物：** 给出具体的、富含所需营养素的食物列表。
5. **推荐营养素补充剂：** 推荐合适的营养素补充剂。
6. **如何食用/补充：** 详细说明推荐食物的食用方法和补充剂的服用剂量、时间。
7. **每日饮水建议：** 根据客户的身高和体重（身高：${formData.height} cm，体重：${formData.weight} kg）精确计算并推荐每日饮水量（以升为单位）。计算公式为：体重（kg）* 35 ml。
8. **特殊建议：**
* 强调每天必须吃生菜。
* 如果锌不足，建议每天吃一颗巴西坚果来补充。
* **严禁推荐芝麻作为锌的来源或任何其他用途。**
* 建议饭后做超慢跑30分钟。
9. **推荐食谱：** 提供一份简单、易于操作的推荐食谱，符合所有饮食限制。请**极其详细地描述食谱的颜色、质地、形状和整体外观，使其具有强烈的视觉感，仿佛用户能看到图片一样。**
**严格的饮食限制（请务必遵守，报告中不得出现以下内容）：**
* 不得推荐任何荤食（肉类、家禽）。
* 不得推荐蛋奶制品（包括酸奶）。
* 不得推荐加工食品。
* 不得推荐面食。
* 不得推荐植物蛋白粉或肽类补充剂。
* 不得推荐任何植物油用于烹饪。
* 不得推荐深海多脂鱼类（如鲑鱼、沙丁鱼、鲭鱼）和藻油或鱼油补充剂。
* 烘焙食品（酸性太高）最好避免，报告中不得推荐。
**客户信息：**
* **姓名：** ${formData.name || '未提供'}
* **年龄：** ${formData.age || '未提供'}
* **性别：** ${formData.gender || '未提供'}
* **身高：** ${formData.height} cm
* **体重：** ${formData.weight} kg
* **居住地区：** ${formData.livingArea || '未提供'}
**日常饮食习惯：**
* **早餐类型：** ${formData.dietBreakfastType || '未描述'}
* **午餐类型：** ${formData.dietLunchType || '未描述'}
* **晚餐类型：** ${formData.dietDinnerType || '未描述'}
* **每日水果摄入量：** ${formData.fruitsDailyAmount || '未描述'}
* **每日蔬菜摄入量：** ${formData.vegetablesDailyAmount || '未描述'}
* **是否包含生菜：** ${formData.includesRawVegetables ? '是' : '否'}
* **常摄入的谷物/淀粉类食物：** ${formData.grainsConsumed.join(', ') || '无'}
* **常摄入的豆类：** ${formData.legumesConsumed.join(', ') || '无'}
* **常摄入的坚果/种子：** ${formData.nutsSeedsConsumed.join(', ') || '无'}
* **目前服用的补充剂：** ${formData.supplements || '无'}
* **避免的食物/过敏：** ${formData.foodsToAvoid || '无'}
* **外出就餐/加工食品频率：** ${formData.eatingOutFrequency || '未描述'}
* **烹饪方法：** ${formData.cookingMethod || '未描述'}
**生活方式：**
* **运动频率/类型：** ${formData.exerciseFrequency || '未描述'}
* **睡眠质量：** ${formData.sleepQualityRating || '未描述'}
* **压力管理：** ${formData.stressManagement || '未描述'}
* **吸烟/饮酒：** ${formData.smokingAlcohol || '无'}
**健康症状或不适：**
* **精力水平：** ${formData.symptomsEnergy ? '疲劳、精神不振' : '无此症状'}
* **消化问题：** ${formData.symptomsDigestive ? '腹胀、便秘、腹泻、消化不良' : '无此症状'}
* **皮肤/头发/指甲健康：** ${formData.symptomsSkinHairNail ? '皮肤干燥、痤疮、指甲脆弱、脱发' : '无此症状'}
* **情绪/认知功能：** ${formData.symptomsMoodCognitive ? '脑雾、易怒、注意力不集中' : '无此症状'}
* **免疫功能：** ${formData.symptomsImmune ? '频繁感冒、伤口愈合缓慢' : '无此症状'}
* **眼部症状：**
* 眼睛疲劳：${formData.symptomsEyeFatigue ? '有' : '无'}
* 眼痛：${formData.symptomsEyePain ? '有' : '无'}
* 泪眼：${formData.symptomsWateryEyes ? '有' : '无'}
* 视线模糊：${formData.symptomsBlurredVision ? '有' : '无'}
* 眼睛干涩：${formData.symptomsDryEyes ? '有' : '无'}
* **耳部症状：**
* 耳鸣：${formData.symptomsEarRinging ? '有' : '无'}
* 耳塞感：${formData.symptomsEarBlocked ? '有' : '无'}
* **口部症状：**
* 口干：${formData.symptomsMouthDry ? '有' : '无'}
* 口渴：${formData.symptomsMouthThirsty ? '有' : '无'}
* 口内疼痛：${formData.symptomsMouthPain ? '有' : '无'}
* 味觉异常：${formData.symptomsTasteAbnormal ? '有' : '无'}
* **喉咙症状：**
* 阻塞感：${formData.symptomsThroatBlocked ? '有' : '无'}
* 异物感：${formData.symptomsThroatForeignBody ? '有' : '无'}
* 发痒：${formData.symptomsThroatItchy ? '有' : '无'}
* 异常咳嗽：${formData.symptomsCoughAbnormal ? '有' : '无'}
* **手部症状：**
* 发麻：${formData.symptomsHandNumbness ? '有' : '无'}
* 发抖：${formData.symptomsHandTremor ? '有' : '无'}
* 疼痛：${formData.symptomsHandPain ? '有' : '无'}
* 感觉异常：${formData.symptomsHandSensationAbnormal ? '有' : '无'}
* **脚部症状：**
* 下肢麻木：${formData.symptomsLegNumbness ? '有' : '无'}
* 疼痛：${formData.symptomsLegPain ? '有' : '无'}
* 肌肉跳动：${formData.symptomsMuscleTwitching ? '有' : '无'}
* **肌肉、关节症状：**
* 颈部疼痛：${formData.symptomsNeckPain ? '有' : '无'}
* 肩膀疼痛：${formData.symptomsShoulderPain ? '有' : '无'}
* 背部疼痛：${formData.symptomsBackPain ? '有' : '无'}
* 腰部疼痛：${formData.symptomsLowerBackPain ? '有' : '无'}
* 关节倦怠或无力：${formData.symptomsJointFatigueWeakness ? '有' : '无'}
* **呼吸器官症状：**
* 呼吸困难：${formData.symptomsBreathingDifficulty ? '有' : '无'}
* 呼吸道阻塞感：${formData.symptomsRespiratoryBlocked ? '有' : '无'}
* 不自主深呼吸或叹气：${formData.symptomsDeepBreathSigh ? '有' : '无'}
* **消化器官症状：**
* 食道阻塞感：${formData.symptomsEsophagusBlocked ? '有' : '无'}
* 恶心、呕吐：${formData.symptomsNauseaVomiting ? '有' : '无'}
* 胃部不适：${formData.symptomsStomachDiscomfort ? '有' : '无'}
* 腹痛：${formData.symptomsAbdominalPain ? '有' : '无'}
* 便秘或腹泻：${formData.symptomsConstipationDiarrhea ? '有' : '无'}
* **膀胱症状：**
* 尿意感频繁：${formData.symptomsFrequentUrination ? '有' : '无'}
* 频尿：${formData.symptomsFrequentUrination ? '有' : '无'}
* 排尿困难：${formData.symptomsUrinationDifficulty ? '有' : '无'}
* 尿床：${formData.symptomsBedwetting ? '有' : '无'}
* **生殖器症状：**
* 性功能障碍：${formData.symptomsSexualDysfunction ? '有' : '无'}
* **皮肤症状：**
* 多汗：${formData.symptomsExcessiveSweating ? '有' : '无'}
* 不出汗：${formData.symptomsNoSweat ? '有' : '无'}
* 皮肤干燥：${formData.symptomsDrySkin ? '有' : '无'}
* 发痒：${formData.symptomsSkinItchy ? '有' : '无'}
* **全身症状：**
* 全身倦怠：${formData.symptomsGeneralFatigue ? '有' : '无'}
* 疲劳：${formData.symptomsGeneralFatigue ? '有' : '无'}
* 无力：${formData.symptomsGeneralWeakness ? '有' : '无'}
* 轻度发烧：${formData.symptomsLowFever ? '有' : '无'}
* 食欲不振：${formData.symptomsLossOfAppetite ? '有' : '无'}
* 睡眠障碍：${formData.symptomsSleepDisorder ? '有' : '无'}
* **精神疾患：**
* 抑郁症（情绪低落、兴趣减退、食欲改变、睡眠障碍、自卑、消极）：${formData.symptomsDepression ? '有' : '无'}
* 焦虑症（过度担忧、坐立不安、注意力不集中、睡眠障碍、肌肉紧张）：${formData.symptomsAnxiety ? '有' : '无'}
* 其他精神疾患（如躁郁症、强迫症、精神分裂症）：${formData.symptomsOtherMentalDisorder || '无'}
* **其他未列出的症状：** ${formData.symptomsOther || '无'}
**慢性疾病/免疫系统疾病：**
* **已诊断的慢性疾病：** ${formData.chronicDiseases || '无'}
* **自身免疫或其他免疫系统相关慢性疾病：** ${formData.autoimmuneConditions || '无'}
请以专业的营养免疫学报告形式输出，语言为中文。
`;
try {
let chatHistory = [];
chatHistory.push({ role: "user", parts: [{ text: prompt }] });
const payload = { contents: chatHistory };
const apiKey = ""; // Canvas will automatically provide the API key
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const result = await response.json();
if (result.candidates && result.candidates.length > 0 &&
result.candidates[0].content && result.candidates[0].content.parts &&
result.candidates[0].content.parts.length > 0) {
const text = result.candidates[0].content.parts[0].text;
setAnalysisResult(text);
// Optionally save the report to Firestore
if (db && userId) {
const reportRef = doc(db, `artifacts/${__app_id}/users/${userId}/nutritionReports`, new Date().toISOString());
await setDoc(reportRef, {
timestamp: new Date(),
formData: formData,
analysis: text
});
}
} else {
setError("未能获取分析结果。AI响应结构不符合预期。");
console.error("AI response structure unexpected:", result);
}
} catch (err) {
console.error("Error fetching AI analysis:", err);
setError("获取AI分析时出错。请稍后重试。");
} finally {
setLoading(false);
}
};
const renderStep = () => {
switch (step) {
case 1:
return (
<div className="space-y-4">
<h2 className="text-2xl font-bold text-gray-800">基本信息</h2>
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700">姓名 (可选)</label>
<input type="text" name="name" id="name" value={formData.name} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" />
</div>
<div>
<label htmlFor="age" className="block text-sm font-medium text-gray-700">年龄</label>
<input type="number" name="age" id="age" value={formData.age} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required />
</div>
<div>
<label htmlFor="gender" className="block text-sm font-medium text-gray-700">性别</label>
<select name="gender" id="gender" value={formData.gender} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required>
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
<option value="其他">其他</option>
</select>
</div>
<div>
<label htmlFor="height" className="block text-sm font-medium text-gray-700">身高 (厘米)</label>
<input type="number" name="height" id="height" value={formData.height} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required />
</div>
<div>
<label htmlFor="weight" className="block text-sm font-medium text-gray-700">体重 (公斤)</label>
<input type="number" name="weight" id="weight" value={formData.weight} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required />
</div>
<div>
<label htmlFor="livingArea" className="block text-sm font-medium text-gray-700">居住地区 (例如：城市，国家)</label>
<input type="text" name="livingArea" id="livingArea" value={formData.livingArea} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" />
</div>
<button onClick={nextStep} className="mt-6 w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
下一步
</button>
</div>
);
case 2:
return (
<div className="space-y-4">
<h2 className="text-2xl font-bold text-gray-800">日常饮食习惯</h2>
<div>
<label htmlFor="dietBreakfastType" className="block text-sm font-medium text-gray-700">您通常早餐的食物类型是？</label>
<select name="dietBreakfastType" id="dietBreakfastType" value={formData.dietBreakfastType} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required>
<option value="">请选择</option>
<option value="以水果为主">以水果为主</option>
<option value="以谷物为主（如燕麦、全麦面包）">以谷物为主（如燕麦、全麦面包）</option>
<option value="以蔬菜为主">以蔬菜为主</option>
<option value="混合餐（水果、谷物、蔬菜等）">混合餐（水果、谷物、蔬菜等）</option>
<option value="不吃早餐">不吃早餐</option>
<option value="其他">其他</option>
</select>
</div>
<div>
<label htmlFor="dietLunchType" className="block text-sm font-medium text-gray-700">您通常午餐的食物类型是？</label>
<select name="dietLunchType" id="dietLunchType" value={formData.dietLunchType} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required>
<option value="">请选择</option>
<option value="以谷物和蔬菜为主">以谷物和蔬菜为主</option>
<option value="以豆类和蔬菜为主">以豆类和蔬菜为主</option>
<option value="以沙拉为主">以沙拉为主</option>
<option value="混合餐">混合餐</option>
<option value="不吃午餐">不吃午餐</option>
<option value="其他">其他</option>
</select>
</div>
<div>
<label htmlFor="dietDinnerType" className="block text-sm font-medium text-gray-700">您通常晚餐的食物类型是？</label>
<select name="dietDinnerType" id="dietDinnerType" value={formData.dietDinnerType} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required>
<option value="">请选择</option>
<option value="以谷物和蔬菜为主">以谷物和蔬菜为主</option>
<option value="以豆类和蔬菜为主">以豆类和蔬菜为主</option>
<option value="以清淡蔬菜汤为主">以清淡蔬菜汤为主</option>
<option value="混合餐">混合餐</option>
<option value="不吃晚餐">不吃晚餐</option>
<option value="其他">其他</option>
</select>
</div>
<div>
<label htmlFor="fruitsDailyAmount" className="block text-sm font-medium text-gray-700">您每天摄入水果的量是？</label>
<select name="fruitsDailyAmount" id="fruitsDailyAmount" value={formData.fruitsDailyAmount} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required>
<option value="">请选择</option>
<option value="0份">0份</option>
<option value="1-2份">1-2份</option>
<option value="3-4份">3-4份</option>
<option value="5份或更多">5份或更多</option>
</select>
</div>
<div>
<label htmlFor="vegetablesDailyAmount" className="block text-sm font-medium text-gray-700">您每天摄入蔬菜的量是？</label>
<select name="vegetablesDailyAmount" id="vegetablesDailyAmount" value={formData.vegetablesDailyAmount} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required>
<option value="">请选择</option>
<option value="0份">0份</option>
<option value="1-2份">1-2份</option>
<option value="3-4份">3-4份</option>
<option value="5份或更多">5份或更多</option>
</select>
</div>
<div className="flex items-center">
<input type="checkbox" name="includesRawVegetables" id="includesRawVegetables" checked={formData.includesRawVegetables} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="includesRawVegetables" className="ml-2 block text-sm text-gray-900">您每天是否包含生菜？</label>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">您常摄入哪些谷物/淀粉类食物？ (可多选)</label>
<div className="mt-1 space-y-2">
<div className="flex items-center">
<input type="checkbox" name="grainsConsumed" id="grainsBrownRice" value="糙米" checked={formData.grainsConsumed.includes('糙米')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="grainsBrownRice" className="ml-2 block text-sm text-gray-900">糙米</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="grainsConsumed" id="grainsQuinoa" value="藜麦" checked={formData.grainsConsumed.includes('藜麦')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="grainsQuinoa" className="ml-2 block text-sm text-gray-900">藜麦</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="grainsConsumed" id="grainsSweetPotato" value="红薯" checked={formData.grainsConsumed.includes('红薯')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="grainsSweetPotato" className="ml-2 block text-sm text-gray-900">红薯</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="grainsConsumed" id="grainsCorn" value="玉米" checked={formData.grainsConsumed.includes('玉米')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="grainsCorn" className="ml-2 block text-sm text-gray-900">玉米</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="grainsConsumed" id="grainsOats" value="燕麦" checked={formData.grainsConsumed.includes('燕麦')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="grainsOats" className="ml-2 block text-sm text-gray-900">燕麦</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="grainsConsumed" id="grainsOther" value="其他" checked={formData.grainsConsumed.includes('其他')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="grainsOther" className="ml-2 block text-sm text-gray-900">其他 (请在后续补充)</label>
</div>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">您常摄入哪些豆类？ (可多选)</label>
<div className="mt-1 space-y-2">
<div className="flex items-center">
<input type="checkbox" name="legumesConsumed" id="legumesLentils" value="扁豆" checked={formData.legumesConsumed.includes('扁豆')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="legumesLentils" className="ml-2 block text-sm text-gray-900">扁豆</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="legumesConsumed" id="legumesChickpeas" value="鹰嘴豆" checked={formData.legumesConsumed.includes('鹰嘴豆')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="legumesChickpeas" className="ml-2 block text-sm text-gray-900">鹰嘴豆</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="legumesConsumed" id="legumesBlackBeans" value="黑豆" checked={formData.legumesConsumed.includes('黑豆')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="legumesBlackBeans" className="ml-2 block text-sm text-gray-900">黑豆</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="legumesConsumed" id="legumesTofu" value="豆腐" checked={formData.legumesConsumed.includes('豆腐')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="legumesTofu" className="ml-2 block text-sm text-gray-900">豆腐</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="legumesConsumed" id="legumesOther" value="其他" checked={formData.legumesConsumed.includes('其他')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="legumesOther" className="ml-2 block text-sm text-gray-900">其他 (请在后续补充)</label>
</div>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">您常摄入哪些坚果/种子？ (可多选)</label>
<div className="mt-1 space-y-2">
<div className="flex items-center">
<input type="checkbox" name="nutsSeedsConsumed" id="nutsAlmonds" value="杏仁" checked={formData.nutsSeedsConsumed.includes('杏仁')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="nutsAlmonds" className="ml-2 block text-sm text-gray-900">杏仁</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="nutsSeedsConsumed" id="nutsWalnuts" value="核桃" checked={formData.nutsSeedsConsumed.includes('核桃')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="nutsWalnuts" className="ml-2 block text-sm text-gray-900">核桃</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="nutsSeedsConsumed" id="seedsChia" value="奇亚籽" checked={formData.nutsSeedsConsumed.includes('奇亚籽')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="seedsChia" className="ml-2 block text-sm text-gray-900">奇亚籽</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="nutsSeedsConsumed" id="seedsFlax" value="亚麻籽" checked={formData.nutsSeedsConsumed.includes('亚麻籽')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="seedsFlax" className="ml-2 block text-sm text-gray-900">亚麻籽</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="nutsSeedsConsumed" id="seedsPumpkin" value="南瓜籽" checked={formData.nutsSeedsConsumed.includes('南瓜籽')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="seedsPumpkin" className="ml-2 block text-sm text-gray-900">南瓜籽</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="nutsSeedsConsumed" id="nutsSeedsOther" value="其他" checked={formData.nutsSeedsConsumed.includes('其他')} onChange={handleMultiSelectChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="nutsSeedsOther" className="ml-2 block text-sm text-gray-900">其他 (请在后续补充)</label>
</div>
</div>
</div>
<div className="flex justify-between mt-6">
<button onClick={prevStep} className="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
上一步
</button>
<button onClick={nextStep} className="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
下一步
</button>
</div>
</div>
);
case 3:
return (
<div className="space-y-4">
<h2 className="text-2xl font-bold text-gray-800">饮食习惯 (续) & 生活方式</h2>
<div>
<label htmlFor="supplements" className="block text-sm font-medium text-gray-700">您目前服用哪些营养补充剂？</label>
<textarea name="supplements" id="supplements" value={formData.supplements} onChange={handleChange} rows="2" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2"></textarea>
</div>
<div>
<label htmlFor="foodsToAvoid" className="block text-sm font-medium text-gray-700">您是否有任何避免食用的食物或已知过敏？</label>
<textarea name="foodsToAvoid" id="foodsToAvoid" value={formData.foodsToAvoid} onChange={handleChange} rows="2" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2"></textarea>
</div>
<div>
<label htmlFor="eatingOutFrequency" className="block text-sm font-medium text-gray-700">您多久外出就餐或食用加工食品一次？</label>
<select name="eatingOutFrequency" id="eatingOutFrequency" value={formData.eatingOutFrequency} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required>
<option value="">请选择</option>
<option value="从不">从不</option>
<option value="偶尔（每月1-2次）">偶尔（每月1-2次）</option>
<option value="每周1-2次">每周1-2次</option>
<option value="每周3次或更多">每周3次或更多</option>
</select>
</div>
<div>
<label htmlFor="cookingMethod" className="block text-sm font-medium text-gray-700">您通常使用什么方法烹饪？</label>
<select name="cookingMethod" id="cookingMethod" value={formData.cookingMethod} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required>
<option value="">请选择</option>
<option value="无油烹饪（蒸、煮、烤）">无油烹饪（蒸、煮、烤）</option>
<option value="少量水/蔬菜高汤烹饪">少量水/蔬菜高汤烹饪</option>
<option value="其他（请在后续补充）">其他（请在后续补充）</option>
</select>
</div>
<h3 className="text-xl font-semibold text-gray-800 mt-6">生活方式</h3>
<div>
<label htmlFor="exerciseFrequency" className="block text-sm font-medium text-gray-700">您多久运动一次？通常进行什么类型的运动？</label>
<textarea name="exerciseFrequency" id="exerciseFrequency" value={formData.exerciseFrequency} onChange={handleChange} rows="2" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2"></textarea>
</div>
<div>
<label htmlFor="sleepQualityRating" className="block text-sm font-medium text-gray-700">您的睡眠质量如何？</label>
<select name="sleepQualityRating" id="sleepQualityRating" value={formData.sleepQualityRating} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" required>
<option value="">请选择</option>
<option value="充足且良好">充足且良好</option>
<option value="良好">良好</option>
<option value="一般">一般</option>
<option value="差">差</option>
</select>
</div>
<div>
<label htmlFor="stressManagement" className="block text-sm font-medium text-gray-700">您如何管理压力？</label>
<input type="text" name="stressManagement" id="stressManagement" value={formData.stressManagement} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" />
</div>
<div>
<label htmlFor="smokingAlcohol" className="block text-sm font-medium text-gray-700">您吸烟或饮酒吗？如果吸烟/饮酒，频率和量是多少？</label>
<input type="text" name="smokingAlcohol" id="smokingAlcohol" value={formData.smokingAlcohol} onChange={handleChange} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" />
</div>
<div className="flex justify-between mt-6">
<button onClick={prevStep} className="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
上一步
</button>
<button onClick={nextStep} className="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
下一步
</button>
</div>
</div>
);
case 4:
return (
<div className="space-y-6">
<h2 className="text-2xl font-bold text-gray-800">健康症状或不适</h2>
<p className="text-sm font-medium text-gray-700">请选择您目前有的健康症状或不适：</p>
{/* General Symptoms */}
<div className="bg-gray-50 p-4 rounded-md shadow-sm">
<h3 className="text-lg font-semibold text-gray-800 mb-2">一般症状</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<div className="flex items-center">
<input type="checkbox" name="symptomsEnergy" id="symptomsEnergy" checked={formData.symptomsEnergy} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsEnergy" className="ml-2 block text-sm text-gray-900">精力水平低（疲劳、精神不振）</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsDigestive" id="symptomsDigestive" checked={formData.symptomsDigestive} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsDigestive" className="ml-2 block text-sm text-gray-900">消化问题（腹胀、便秘、腹泻、消化不良）</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsSkinHairNail" id="symptomsSkinHairNail" checked={formData.symptomsSkinHairNail} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsSkinHairNail" className="ml-2 block text-sm text-gray-900">皮肤/头发/指甲问题（皮肤干燥、痤疮、指甲脆弱、脱发）</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsMoodCognitive" id="symptomsMoodCognitive" checked={formData.symptomsMoodCognitive} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsMoodCognitive" className="ml-2 block text-sm text-gray-900">情绪/认知功能问题（脑雾、易怒、注意力不集中）</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsImmune" id="symptomsImmune" checked={formData.symptomsImmune} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsImmune" className="ml-2 block text-sm text-gray-900">免疫功能问题（频繁感冒、伤口愈合缓慢）</label>
</div>
</div>
</div>
{/* Symptoms by Organ/System */}
<div className="bg-gray-50 p-4 rounded-md shadow-sm">
<h3 className="text-lg font-semibold text-gray-800 mb-2">按器官/部位划分的症状</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p className="font-medium text-gray-700 mb-1">眼部：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsEyeFatigue" id="symptomsEyeFatigue" checked={formData.symptomsEyeFatigue} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsEyeFatigue" className="ml-2 block text-sm text-gray-900">眼睛疲劳</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsEyePain" id="symptomsEyePain" checked={formData.symptomsEyePain} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsEyePain" className="ml-2 block text-sm text-gray-900">眼痛</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsWateryEyes" id="symptomsWateryEyes" checked={formData.symptomsWateryEyes} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsWateryEyes" className="ml-2 block text-sm text-gray-900">泪眼</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsBlurredVision" id="symptomsBlurredVision" checked={formData.symptomsBlurredVision} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsBlurredVision" className="ml-2 block text-sm text-gray-900">视线模糊</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsDryEyes" id="symptomsDryEyes" checked={formData.symptomsDryEyes} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsDryEyes" className="ml-2 block text-sm text-gray-900">眼睛干涩</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">耳部：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsEarRinging" id="symptomsEarRinging" checked={formData.symptomsEarRinging} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsEarRinging" className="ml-2 block text-sm text-gray-900">耳鸣</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsEarBlocked" id="symptomsEarBlocked" checked={formData.symptomsEarBlocked} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsEarBlocked" className="ml-2 block text-sm text-gray-900">耳塞感</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">口部：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsMouthDry" id="symptomsMouthDry" checked={formData.symptomsMouthDry} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsMouthDry" className="ml-2 block text-sm text-gray-900">口干</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsMouthThirsty" id="symptomsMouthThirsty" checked={formData.symptomsMouthThirsty} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsMouthThirsty" className="ml-2 block text-sm text-gray-900">口渴</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsMouthPain" id="symptomsMouthPain" checked={formData.symptomsMouthPain} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsMouthPain" className="ml-2 block text-sm text-gray-900">口内疼痛</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsTasteAbnormal" id="symptomsTasteAbnormal" checked={formData.symptomsTasteAbnormal} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsTasteAbnormal" className="ml-2 block text-sm text-gray-900">味觉异常</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">喉咙：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsThroatBlocked" id="symptomsThroatBlocked" checked={formData.symptomsThroatBlocked} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsThroatBlocked" className="ml-2 block text-sm text-gray-900">阻塞感</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsThroatForeignBody" id="symptomsThroatForeignBody" checked={formData.symptomsThroatForeignBody} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsThroatForeignBody" className="ml-2 block text-sm text-gray-900">异物感</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsThroatItchy" id="symptomsThroatItchy" checked={formData.symptomsThroatItchy} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsThroatItchy" className="ml-2 block text-sm text-gray-900">发痒</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsCoughAbnormal" id="symptomsCoughAbnormal" checked={formData.symptomsCoughAbnormal} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsCoughAbnormal" className="ml-2 block text-sm text-gray-900">异常咳嗽</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">手部：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsHandNumbness" id="symptomsHandNumbness" checked={formData.symptomsHandNumbness} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsHandNumbness" className="ml-2 block text-sm text-gray-900">发麻</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsHandTremor" id="symptomsHandTremor" checked={formData.symptomsHandTremor} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsHandTremor" className="ml-2 block text-sm text-gray-900">发抖</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsHandPain" id="symptomsHandPain" checked={formData.symptomsHandPain} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsHandPain" className="ml-2 block text-sm text-gray-900">疼痛</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsHandSensationAbnormal" id="symptomsHandSensationAbnormal" checked={formData.symptomsHandSensationAbnormal} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsHandSensationAbnormal" className="ml-2 block text-sm text-gray-900">感觉异常</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">脚部：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsLegNumbness" id="symptomsLegNumbness" checked={formData.symptomsLegNumbness} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsLegNumbness" className="ml-2 block text-sm text-gray-900">下肢麻木</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsLegPain" id="symptomsLegPain" checked={formData.symptomsLegPain} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsLegPain" className="ml-2 block text-sm text-gray-900">疼痛</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsMuscleTwitching" id="symptomsMuscleTwitching" checked={formData.symptomsMuscleTwitching} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsMuscleTwitching" className="ml-2 block text-sm text-gray-900">肌肉跳动</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">肌肉、关节：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsNeckPain" id="symptomsNeckPain" checked={formData.symptomsNeckPain} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsNeckPain" className="ml-2 block text-sm text-gray-900">颈部疼痛</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsShoulderPain" id="symptomsShoulderPain" checked={formData.symptomsShoulderPain} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsShoulderPain" className="ml-2 block text-sm text-gray-900">肩膀疼痛</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsBackPain" id="symptomsBackPain" checked={formData.symptomsBackPain} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsBackPain" className="ml-2 block text-sm text-gray-900">背部疼痛</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsLowerBackPain" id="symptomsLowerBackPain" checked={formData.symptomsLowerBackPain} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsLowerBackPain" className="ml-2 block text-sm text-gray-900">腰痛</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsJointFatigueWeakness" id="symptomsJointFatigueWeakness" checked={formData.symptomsJointFatigueWeakness} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsJointFatigueWeakness" className="ml-2 block text-sm text-gray-900">关节倦怠或无力</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">呼吸器官：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsBreathingDifficulty" id="symptomsBreathingDifficulty" checked={formData.symptomsBreathingDifficulty} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsBreathingDifficulty" className="ml-2 block text-sm text-gray-900">呼吸困难</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsRespiratoryBlocked" id="symptomsRespiratoryBlocked" checked={formData.symptomsRespiratoryBlocked} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsRespiratoryBlocked" className="ml-2 block text-sm text-gray-900">呼吸道阻塞感</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsDeepBreathSigh" id="symptomsDeepBreathSigh" checked={formData.symptomsDeepBreathSigh} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsDeepBreathSigh" className="ml-2 block text-sm text-gray-900">不自主深呼吸或叹气</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">消化器官：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsEsophagusBlocked" id="symptomsEsophagusBlocked" checked={formData.symptomsEsophagusBlocked} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsEsophagusBlocked" className="ml-2 block text-sm text-gray-900">食道阻塞感</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsNauseaVomiting" id="symptomsNauseaVomiting" checked={formData.symptomsNauseaVomiting} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsNauseaVomiting" className="ml-2 block text-sm text-gray-900">恶心、呕吐</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsStomachDiscomfort" id="symptomsStomachDiscomfort" checked={formData.symptomsStomachDiscomfort} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsStomachDiscomfort" className="ml-2 block text-sm text-gray-900">胃部不适</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsAbdominalPain" id="symptomsAbdominalPain" checked={formData.symptomsAbdominalPain} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsAbdominalPain" className="ml-2 block text-sm text-gray-900">腹痛</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsConstipationDiarrhea" id="symptomsConstipationDiarrhea" checked={formData.symptomsConstipationDiarrhea} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsConstipationDiarrhea" className="ml-2 block text-sm text-gray-900">便秘或腹泻</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">膀胱：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsFrequentUrination" id="symptomsFrequentUrination" checked={formData.symptomsFrequentUrination} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsFrequentUrination" className="ml-2 block text-sm text-gray-900">尿意感频繁/频尿</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsUrinationDifficulty" id="symptomsUrinationDifficulty" checked={formData.symptomsUrinationDifficulty} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsUrinationDifficulty" className="ml-2 block text-sm text-gray-900">排尿困难</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsBedwetting" id="symptomsBedwetting" checked={formData.symptomsBedwetting} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsBedwetting" className="ml-2 block text-sm text-gray-900">尿床</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">生殖器：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsSexualDysfunction" id="symptomsSexualDysfunction" checked={formData.symptomsSexualDysfunction} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsSexualDysfunction" className="ml-2 block text-sm text-gray-900">性功能障碍</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">皮肤：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsExcessiveSweating" id="symptomsExcessiveSweating" checked={formData.symptomsExcessiveSweating} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsExcessiveSweating" className="ml-2 block text-sm text-gray-900">多汗</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsNoSweat" id="symptomsNoSweat" checked={formData.symptomsNoSweat} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsNoSweat" className="ml-2 block text-sm text-gray-900">不出汗</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsDrySkin" id="symptomsDrySkin" checked={formData.symptomsDrySkin} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsDrySkin" className="ml-2 block text-sm text-gray-900">皮肤干燥</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsSkinItchy" id="symptomsSkinItchy" checked={formData.symptomsSkinItchy} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsSkinItchy" className="ml-2 block text-sm text-gray-900">发痒</label>
</div>
</div>
</div>
<div>
<p className="font-medium text-gray-700 mb-1">全身症状：</p>
<div className="space-y-1">
<div className="flex items-center">
<input type="checkbox" name="symptomsGeneralFatigue" id="symptomsGeneralFatigue" checked={formData.symptomsGeneralFatigue} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsGeneralFatigue" className="ml-2 block text-sm text-gray-900">全身倦怠/疲劳</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsGeneralWeakness" id="symptomsGeneralWeakness" checked={formData.symptomsGeneralWeakness} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsGeneralWeakness" className="ml-2 block text-sm text-gray-900">无力</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsLowFever" id="symptomsLowFever" checked={formData.symptomsLowFever} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsLowFever" className="ml-2 block text-sm text-gray-900">轻度发烧</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsLossOfAppetite" id="symptomsLossOfAppetite" checked={formData.symptomsLossOfAppetite} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsLossOfAppetite" className="ml-2 block text-sm text-gray-900">食欲不振</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsSleepDisorder" id="symptomsSleepDisorder" checked={formData.symptomsSleepDisorder} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsSleepDisorder" className="ml-2 block text-sm text-gray-900">睡眠障碍</label>
</div>
</div>
</div>
</div>
</div>
{/* Chronic Conditions */}
<div className="bg-gray-50 p-4 rounded-md shadow-sm">
<h3 className="text-lg font-semibold text-gray-800 mb-2">慢性疾病与精神疾患</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<div className="flex items-center">
<input type="checkbox" name="symptomsHighBloodPressure" id="symptomsHighBloodPressure" checked={formData.symptomsHighBloodPressure} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsHighBloodPressure" className="ml-2 block text-sm text-gray-900">血压高</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsDiabetes" id="symptomsDiabetes" checked={formData.symptomsDiabetes} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsDiabetes" className="ml-2 block text-sm text-gray-900">糖尿病</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsThyroidIssues" id="symptomsThyroidIssues" checked={formData.symptomsThyroidIssues} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsThyroidIssues" className="ml-2 block text-sm text-gray-900">甲状腺问题</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsCardiovascularIssues" id="symptomsCardiovascularIssues" checked={formData.symptomsCardiovascularIssues} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsCardiovascularIssues" className="ml-2 block text-sm text-gray-900">心血管疾病</label>
</div>
{/* Mental Health */}
<div className="flex items-center">
<input type="checkbox" name="symptomsDepression" id="symptomsDepression" checked={formData.symptomsDepression} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsDepression" className="ml-2 block text-sm text-gray-900">抑郁症</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsAnxiety" id="symptomsAnxiety" checked={formData.symptomsAnxiety} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsAnxiety" className="ml-2 block text-sm text-gray-900">焦虑症</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsBipolarDisorder" id="symptomsBipolarDisorder" checked={formData.symptomsBipolarDisorder} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsBipolarDisorder" className="ml-2 block text-sm text-gray-900">躁郁症</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsOCD" id="symptomsOCD" checked={formData.symptomsOCD} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsOCD" className="ml-2 block text-sm text-gray-900">强迫症</label>
</div>
<div className="flex items-center">
<input type="checkbox" name="symptomsSchizophrenia" id="symptomsSchizophrenia" checked={formData.symptomsSchizophrenia} onChange={handleChange} className="h-4 w-4 text-indigo-600 border-gray-300 rounded" />
<label htmlFor="symptomsSchizophrenia" className="ml-2 block text-sm text-gray-900">精神分裂症</label>
</div>
</div>
<div className="mt-4">
<label htmlFor="symptomsOtherMentalDisorder" className="block text-sm font-medium text-gray-700">其他精神疾患 (请具体说明):</label>
<textarea name="symptomsOtherMentalDisorder" id="symptomsOtherMentalDisorder" value={formData.symptomsOtherMentalDisorder} onChange={handleChange} rows="2" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2"></textarea>
</div>
</div>
<div>
<label htmlFor="symptomsOther" className="block text-sm font-medium text-gray-700">其他您认为重要的未列出的症状或不适：</label>
<textarea name="symptomsOther" id="symptomsOther" value={formData.symptomsOther} onChange={handleChange} rows="3" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2"></textarea>
</div>
<h3 className="text-xl font-semibold text-gray-800 mt-6">慢性疾病与免疫系统状况</h3>
<div>
<label htmlFor="chronicDiseases" className="block text-sm font-medium text-gray-700">您是否有任何已诊断的慢性疾病？如果有，请列出：</label>
<textarea name="chronicDiseases" id="chronicDiseases" value={formData.chronicDiseases} onChange={handleChange} rows="3" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2"></textarea>
</div>
<div>
<label htmlFor="autoimmuneConditions" className="block text-sm font-medium text-gray-700">您是否有任何自身免疫疾病或其他免疫系统相关的慢性疾病？如果有，请列出：</label>
<textarea name="autoimmuneConditions" id="autoimmuneConditions" value={formData.autoimmuneConditions} onChange={handleChange} rows="3" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2"></textarea>
</div>
<div className="flex justify-between mt-6">
<button onClick={prevStep} className="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
上一步
</button>
<button
type="submit"
className="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out"
disabled={loading}
>
{loading ? '分析中...' : '获取分析与建议'}
</button>
</div>
</div>
);
default:
return null;
}
};
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-4 font-inter">
<div className="bg-white p-8 rounded-lg shadow-xl w-full max-w-2xl">
<h1 className="text-3xl font-extrabold text-center text-indigo-700 mb-6">营养免疫学问答应用</h1>
{userId && <p className="text-center text-xs text-gray-500 mb-4">用户ID: {userId}</p>}
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
<strong className="font-bold">错误!</strong>
<span className="block sm:inline"> {error}</span>
</div>
)}
{!analysisResult ? (
<form onSubmit={handleSubmit}>
{renderStep()}
</form>
) : (
<div className="mt-8">
<h2 className="text-2xl font-bold text-gray-800 mb-4">营养分析报告</h2>
<div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: analysisResult.replace(/\n/g, '<br/>') }}></div>
<button
onClick={() => {
setAnalysisResult(null);
setFormData({
name: '', age: '', gender: '', height: '', weight: '', livingArea: '',
dietBreakfastType: '', dietLunchType: '', dietDinnerType: '', fruitsDailyAmount: '', vegetablesDailyAmount: '',
includesRawVegetables: false, grainsConsumed: [], legumesConsumed: [], nutsSeedsConsumed: [],
supplements: '', foodsToAvoid: '', eatingOutFrequency: '', cookingMethod: '',
exerciseFrequency: '', sleepQualityRating: '', stressManagement: '', smokingAlcohol: '',
symptomsEnergy: false, symptomsDigestive: false, symptomsSkinHairNail: false, symptomsMoodCognitive: false,
symptomsImmune: false,
symptomsEyeFatigue: false, symptomsEyePain: false, symptomsWateryEyes: false, symptomsBlurredVision: false, symptomsDryEyes: false,
symptomsEarRinging: false, symptomsEarBlocked: false,
symptomsMouthDry: false, symptomsMouthThirsty: false, symptomsMouthPain: false, symptomsTasteAbnormal: false,
symptomsThroatBlocked: false, symptomsThroatForeignBody: false, symptomsThroatItchy: false, symptomsCoughAbnormal: false,
symptomsHandNumbness: false, symptomsHandTremor: false, symptomsHandPain: false, symptomsHandSensationAbnormal: false,
symptomsLegNumbness: false, symptomsLegPain: false, symptomsMuscleTwitching: false,
symptomsNeckPain: false, symptomsShoulderPain: false, symptomsBackPain: false, symptomsLowerBackPain: false, symptomsJointFatigueWeakness: false,
symptomsBreathingDifficulty: false, symptomsRespiratoryBlocked: false, symptomsDeepBreathSigh: false,
symptomsEsophagusBlocked: false, symptomsNauseaVomiting: false, symptomsStomachDiscomfort: false, symptomsAbdominalPain: false, symptomsConstipationDiarrhea: false,
symptomsFrequentUrination: false, symptomsUrinationDifficulty: false, symptomsBedwetting: false,
symptomsSexualDysfunction: false,
symptomsExcessiveSweating: false, symptomsNoSweat: false, symptomsDrySkin: false, symptomsSkinItchy: false,
symptomsGeneralFatigue: false, symptomsGeneralWeakness: false, symptomsLowFever: false, symptomsLossOfAppetite: false, symptomsSleepDisorder: false,
symptomsDepression: false, symptomsAnxiety: false, symptomsBipolarDisorder: false, symptomsOCD: false, symptomsSchizophrenia: false,
symptomsOtherMentalDisorder: '',
symptomsOther: '', chronicDiseases: '', autoimmuneConditions: ''
});
setStep(1);
}}
className="mt-6 w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out"
>
重新开始
</button>
</div>
)}
</div>
</div>
);