我先进行设计系统获取和图片资源获取。现在我来设计这个婴儿辅食过敏原追踪界面。这是一个移动端H5页面，我将采用温暖、柔和、可爱的设计风格。好的，现在开始设计这个界面。这是一个移动端H5页面，用于根据婴儿月龄和过敏原情况推荐/筛选食物。
```json{
"summary": "设计了一个婴儿辅食过敏原追踪与推荐界面，采用温暖柔和的粉彩美学风格。主色调为柔粉色(#FF8C9E)搭配淡紫和薄荷绿点缀，营造温馨可爱的母婴产品氛围。使用'Nunito'圆润字体增强亲和力。界面包含：月龄选择器（按月滑动选择）、过敏原标签选择（常见8大过敏原）、食物推荐卡片网格（显示食物名称、月龄适配度、过敏风险标识）。卡片采用毛玻璃效果和柔和阴影，交互状态有平滑过渡动画。背景使用渐变流体形状装饰，整体风格统一、视觉温暖、信息层级清晰。",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n <title>宝宝辅食过敏原指南</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;90…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n :root {\n --pink: #FF8C9E;\n --pink-light: #FFD4DA;\n --pink-dark: #E86A7E;\n --lavender: #C9B1FF;\n --mint: #7ED7C1;\n --mint-light: #D4F5EC;\n --peach: #FFC8A2;\n --cream: #FFF5F0;\n --bg-start: #FFF8F6;\n --bg-end: #F0EEFF;\n --card-bg: rgba(255, 255, 255, 0.82);\n --text-primary: #2D1B36;\n --text-secondary: #6B5B7B;\n --text-muted: #A894B0;\n --shadow-soft: 0 8px 32px rgba(255, 140, 158, 0.15);\n --shadow-card: 0 4px 20px rgba(201, 177, 255, 0.18);\n --radius-card: 20px;\n --radius-btn: 14px;\n --radius-pill: 50px;\n }\n\n * {\n -webkit-tap-highlight-color: transparent;\n }\n\n body {\n font-family: 'Nunito', 'Quicksand', sans-serif;\n background: linear-gradient(145deg, var(--bg-start) 0%, var(--bg-end) 100%);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n /* 背景装饰流体 */\n .bg-blob {\n position: fixed;\n border-radius: 50%;\n filter: blur(80px);\n opacity: 0.35;\n pointer-events: none;\n z-index: 0;\n }\n .bg-blob-1 {\n width: 300px;\n height: 300px;\n background: var(--pink-light);\n top: -80px;\n right: -60px;\n animation: blobFloat 8s ease-in-out infinite alternate;\n }\n .bg-blob-2 {\n width: 250px;\n height: 250px;\n background: var(--lavender);\n bottom: 10%;\n left: -80px;\n animation: blobFloat 10s ease-in-out infinite alternate-reverse;\n }\n .bg-blob-3 {\n width: 200px;\n height: 200px;\n background: var(--mint);\n bottom: -40px;\n right: 20%;\n opacity: 0.2;\n animation: blobFloat 12s ease-in-out infinite alternate;\n }\n\n @keyframes blobFloat {\n 0% { transform: translate(0, 0) scale(1); }\n 100% { transform: translate(30px, -30px) scale(1.1); }\n }\n\n /* 主容器 */\n .app-container {\n position: relative;\n z-index: 1;\n max-width: 420px;\n margin: 0 auto;\n padding: 20px 16px 32px;\n }\n\n /* 头部 */\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 0 16px;\n }\n .header-title {\n font-size: 22px;\n font-weight: 900;\n color: var(--text-primary);\n letter-spacing: -0.3px;\n }\n .header-title span {\n color: var(--pink);\n }\n .header-icon {\n width: 44px;\n height: 44px;\n background: var(--card-bg);\n backdrop-filter: blur(12px);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--pink);\n font-size: 18px;\n box-shadow: var(--shadow-soft);\n cursor: pointer;\n transition: all 0.25s ease;\n }\n .header-icon:active {\n transform: scale(0.92);\n }\n\n /* 月龄选择器 */\n .age-section {\n margin-bottom: 24px;\n }\n .age-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 700;\n color: var(--text-primary);\n margin-bottom: 12px;\n }\n .age-label i {\n color: var(--pink);\n font-size: 16px;\n }\n .age-display {\n text-align: center;\n margin-bottom: 14px;\n }\n .age-display .age-number {\n font-size: 42px;\n font-weight: 900;\n color: var(--pink);\n line-height: 1;\n transition: all 0.3s ease;\n }\n .age-display .age-unit {\n font-size: 16px;\n font-weight: 600;\n color: var(--text-secondary);\n margin-left: 4px;\n }\n .age-display .age-hint {\n font-size: 13px;\n color: var(--text-muted);\n margin-top: 4px;\n font-weight: 500;\n }\n\n /* 月龄滑动条 */\n .slider-container {\n position: relative;\n padding: 0 4px;\n }\n .slider-track {\n position: relative;\n height: 6px;\n background: rgba(201, 177, 255, 0.25);\n border-radius: 10px;\n margin: 0 6px;\n }\n .slider-fill {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: linear-gradient(90deg, var(--pink-light), var(--pink));\n border-radius: 10px;\n transition: width 0.2s ease;\n width: 0%;\n }\n input[type=\"range\"] {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 6px;\n background: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n margin: 0;\n cursor: pointer;\n }\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: linear-gradient(135deg, #FF8C9E, #FF6B81);\n box-shadow: 0 2px 12px rgba(255, 140, 158, 0.45);\n cursor: pointer;\n transition: all 0.2s ease;\n border: 3px solid white;\n }\n input[type=\"range\"]::-webkit-slider-thumb:active {\n transform: scale(1.15);\n }\n input[type=\"range\"]::-moz-range-thumb {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: linear-gradient(135deg, #FF8C9E, #FF6B81);\n box-shadow: 0 2px 12px rgba(255, 140, 158, 0.45);\n cursor: pointer;\n border: 3px solid white;\n }\n .slider-marks {\n display: flex;\n justify-content: space-between;\n padding: 8px 8px 0;\n font-size: 11px;\n font-weight: 600;\n color: var(--text-muted);\n }\n .slider-marks span {\n transition: color 0.2s ease;\n }\n .slider-marks span.active {\n color: var(--pink);\n }\n\n /* 过敏原标签 */\n .allergen-section {\n margin-bottom: 24px;\n }\n .section-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 700;\n color: var(--text-primary);\n margin-bottom: 12px;\n }\n .section-label i {\n color: var(--pink);\n font-size: 15px;\n }\n .allergen-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n .allergen-tag {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border-radius: var(--radius-pill);\n font-size: 13px;\n font-weight: 600;\n background: var(--card-bg);\n backdrop-filter: blur(8px);\n color: var(--text-secondary);\n border: 1.5px solid rgba(201, 177, 255, 0.2);\n cursor: pointer;\n transition: all 0.25s ease;\n user-select: none;\n box-shadow: 0 2px 8px rgba(0,0,0,0.03);\n }\n .allergen-tag i {\n font-size: 12px;\n opacity: 0.5;\n transition: all 0.25s ease;\n }\n .allergen-tag:active {\n transform: scale(0.95);\n }\n .allergen-tag.active {\n background: linear-gradient(135deg, #FF8C9E, #FF6B81);\n color: white;\n border-color: transparent;\n box-shadow: 0 4px 16px rgba(255, 140, 158, 0.35);\n }\n .allergen-tag.active i {\n opacity: 1;\n }\n .allergen-tag.warning {\n border-color: rgba(255, 200, 162, 0.5);\n background: rgba(255, 200, 162, 0.15);\n }\n\n /* 食物卡片网格 */\n .food-section {\n margin-bottom: 16px;\n }\n .food-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 14px;\n }\n .food-header .section-label {\n margin-bottom: 0;\n }\n .food-count {\n font-size: 13px;\n font-weight: 600;\n color: var(--text-muted);\n background: var(--card-bg);\n padding: 4px 14px;\n border-radius: var(--radius-pill);\n backdrop-filter: blur(8px);\n }\n\n .food-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n\n .food-card {\n background: var(--card-bg);\n backdrop-filter: blur(16px);\n border-radius: var(--radius-card);\n padding: 16px 14px 14px;\n box-shadow: var(--shadow-card);\n border: 1px solid rgba(255, 255, 255, 0.6);\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .food-card:active {\n transform: scale(0.96);\n }\n .food-card .card-badge {\n position: absolute;\n top: 10px;\n right: 10px;\n font-size: 10px;\n font-weight: 700;\n padding: 3px 10px;\n border-radius: var(--radius-pill);\n background: var(--mint-light);\n color: #3A9D8F;\n letter-spacing: 0.3px;\n }\n .food-card .card-badge.warning {\n background: #FFF0E6;\n color: #E8956A;\n }\n .food-card .card-badge.danger {\n background: #FFE8EC;\n color: #E86A7E;\n }\n .food-card .food-icon {\n width: 48px;\n height: 48px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n margin-bottom: 12px;\n background: linear-gradient(135deg, rgba(255, 140, 158, 0.12), rgba(201, 177, 255, 0.12));\n }\n .food-card .food-name {\n font-size: 16px;\n font-weight: 800;\n color: var(--text-primary);\n margin-bottom: 4px;\n }\n .food-card .food-desc {\n font-size: 12px;\n color: var(--text-muted);\n font-weight: 500;\n line-height: 1.4;\n margin-bottom: 10px;\n }\n .food-card .food-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n }\n .food-card .food-meta .meta-tag {\n font-size: 10px;\n font-weight: 700;\n padding: 3px 10px;\n border-radius: var(--radius-pill);\n background: rgba(201, 177, 255, 0.15);\n color: #8B7BBF;\n }\n .food-card .food-meta .meta-tag.green {\n background: rgba(126, 215, 193, 0.2);\n color: #4DAF9A;\n }\n .food-card .food-meta .meta-tag.orange {\n background: rgba(255, 200, 162, 0.25);\n color: #D48A5A;\n }\n\n /* 空状态 */\n .empty-state {\n grid-column: 1 / -1;\n text-align: center;\n padding: 40px 20px;\n background: var(--card-bg);\n backdrop-filter: blur(16px);\n border-radius: var(--radius-card);\n box-shadow: var(--shadow-card);\n }\n .empty-state i {\n font-size: 48px;\n color: var(--pink-light);\n margin-bottom: 12px;\n }\n .empty-state p {\n font-size: 14px;\n color: var(--text-muted);\n font-weight: 500;\n }\n\n /* 底部提示 */\n .footer-note {\n text-align: center;\n padding: 20px 0 8px;\n font-size: 12px;\n color: var(--text-muted);\n font-weight: 500;\n }\n .footer-note i {\n margin-right: 4px;\n color: var(--pink);\n }\n\n /* 动画 */\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(16px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .food-card {\n animation: fadeUp 0.5s ease forwards;\n opacity: 0;\n }\n .food-card:nth-child(1) { animation-delay: 0.05s; }\n .food-card:nth-child(2) { animation-delay: 0.1s; }\n .food-card:nth-child(3) { animation-delay: 0.15s; }\n .food-card:nth-child(4) { animation-delay: 0.2s; }\n .food-card:nth-child(5) { animation-delay: 0.25s; }\n .food-card:nth-child(6) { animation-delay: 0.3s; }\n\n /* 滚动条美化 */\n ::-webkit-scrollbar {\n width: 4px;\n }\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n ::-webkit-scrollbar-thumb {\n background: var(--pink-light);\n border-radius: 10px;\n }\n </style>\n</head>\n<body>\n <!-- 背景装饰 -->\n <div class=\"bg-blob bg-blob-1\"></div>\n <div class=\"bg-blob bg-blob-2\"></div>\n <div class=\"bg-blob bg-blob-3\"></div>\n\n <div class=\"app-container\">\n <!-- 头部 -->\n <div class=\"header\">\n <div class=\"header-title\">🍼 宝宝<span>辅食</span>指南</div>\n <div class=\"header-icon\" onclick=\"resetAll()\" title=\"重置筛选\">\n <i class=\"fa-solid fa-rotate\"></i>\n </div>\n </div>\n\n <!-- 月龄选择 -->\n <div class=\"age-section\">\n <div class=\"age-label\">\n <i class=\"fa-solid fa-calendar-days\"></i>\n 宝宝月龄\n </div>\n <div class=\"age-display\">\n <span class=\"age-number\" id=\"ageNumber\">6</span>\n <span class=\"age-unit\">个月</span>\n <div class=\"age-hint\" id=\"ageHint\">开始添加辅食的关键期 ✨</div>\n </div>\n <div class=\"slider-container\">\n <div class=\"slider-track\">\n <div class=\"slider-fill\" id=\"sliderFill\"></div>\n </div>\n <input type=\"range\" id=\"ageSlider\" min=\"4\" max=\"24\" value=\"6\" step=\"1\">\n <div class=\"slider-marks\">\n <span>4m</span>\n <span>8m</span>\n <span>12m</span>\n <span>18m</span>\n <span>24m</span>\n </div>\n </div>\n </div>\n\n <!-- 过敏原选择 -->\n <div class=\"allergen-section\">\n <div class=\"section-label\">\n <i class=\"fa-solid fa-shield-heart\"></i>\n 过敏原筛选\n <span style=\"font-size:12px;font-weight:500;color:var(--text-muted);margin-left:4px;\">（可多选）</span>\n </div>\n <div class=\"allergen-grid\" id=\"allergenGrid\">\n <div class=\"allergen-tag\" data-allergen=\"milk\">\n <i class=\"fa-solid fa-cow\"></i> 牛奶\n </div>\n <div class=\"allergen-tag\" data-allergen=\"egg\">\n <i class=\"fa-solid fa-egg\"></i> 鸡蛋\n </div>\n <div class=\"allergen-tag\" data-allergen=\"peanut\">\n <i class=\"fa-solid fa-seedling\"></i> 花生\n </div>\n <div class=\"allergen-tag\" data-allergen=\"soy\">\n <i class=\"fa-solid fa-leaf\"></i> 大豆\n </div>\n <div class=\"allergen-tag\" data-allergen=\"wheat\">\n <i class=\"fa-solid fa-wheat-awn\"></i> 小麦\n </div>\n <div class=\"allergen-tag\" data-allergen=\"fish\">\n <i class=\"fa-solid fa-fish\"></i> 鱼类\n </div>\n <div class=\"allergen-tag\" data-allergen=\"shrimp\">\n <i class=\"fa-solid fa-shrimp\"></i> 虾蟹\n </div>\n <div class=\"allergen-tag\" data-allergen=\"nut\">\n <i class=\"fa-solid fa-tree\"></i> 坚果\n </div>\n </div>\n </div>\n\n <!-- 食物推荐 -->\n <div class=\"food-section\">\n <div class=\"food-header\">\n <div class=\"section-label\">\n <i class=\"fa-solid fa-utensils\"></i>\n 推荐食物\n </div>\n <div class=\"food-count\" id=\"foodCount\">6 种</div>\n </div>\n <div class=\"food-grid\" id=\"foodGrid\">\n <!-- 由 JS 动态渲染 -->\n </div>\n </div>\n\n <div class=\"footer-note\">\n <i class=\"fa-solid fa-heart\"></i> 每次只添加一种新食物，观察3-5天\n </div>\n </div>\n\n <script>\n // ========== 食物数据库 ==========\n const foodDB = [\n { id: 1, name: '高铁米粉', icon: 'fa-solid fa-bowl-food', desc: '易消化，补铁首选', minAge: 4, allergens: ['wheat'], tags: ['初期辅食', '高铁'], risk: 'safe' },\n { id: 2, name: '南瓜泥', icon: 'fa-solid fa-pumpkin', desc: '富含维生素A，口感香甜', minAge: 5, allergens: [], tags: ['根茎类', '维生素'], risk: 'safe' },\n { id: 3, name: '西兰花', icon: 'fa-solid fa-broccoli', desc: '高纤维，增强免疫力', minAge: 6, allergens: [], tags: ['蔬菜', '高纤维'], risk: 'safe' },\n { id: 4, name: '苹果泥', icon: 'fa-solid fa-apple-whole', desc: '酸甜可口，助消化', minAge: 5, allergens: [], tags: ['水果', '维生素C'], risk: 'safe' },\n { id: 5, name: '鸡蛋黄', icon: 'fa-solid fa-egg', desc: '优质蛋白，补铁补脑', minAge: 7, allergens: ['egg'], tags: ['蛋白质', '补铁'], risk: 'caution' },\n { id: 6, name: '三文鱼', icon: 'fa-solid fa-fish', desc: '富含DHA，促进大脑发育', minAge: 8, allergens: ['fish'], tags: ['鱼类', 'DHA'], risk: 'caution' },\n { id: 7, name: '豆腐', icon: 'fa-solid fa-cubes', desc: '植物蛋白，口感软嫩', minAge: 8, allergens: ['soy'], tags: ['豆制品', '蛋白质'], risk: 'safe' },\n { id: 8, name: '酸奶', icon: 'fa-solid fa-jar', desc: '益生菌助消化，补钙', minAge: 8, allergens: ['milk'], tags: ['奶制品', '益生菌'], risk: 'caution' },\n { id: 9, name: '牛油果', icon: 'fa-solid fa-avocado', desc: '健康脂肪，促进发育', minAge: 6, allergens: [], tags: ['水果', '健康脂肪'], risk: 'safe' },\n { id: 10, name: '胡萝卜', icon: 'fa-solid fa-carrot', desc: 'β-胡萝卜素，护眼', minAge: 5, allergens: [], tags: ['根茎类', '维生素A'], risk: 'safe' },\n { id: 11, name: '虾仁泥', icon: 'fa-solid fa-shrimp', desc: '高蛋白低脂肪', minAge: 10, allergens: ['shrimp'], tags: ['海鲜', '蛋白质'], risk: 'caution' },\n { id: 12, name: '花生酱', icon: 'fa-solid fa-jar', desc: '高蛋白，注意过敏', minAge: 12, allergens: ['peanut', 'nut'], tags: ['坚果酱', '蛋白质'], risk: 'danger' },\n { id: 13, name: '全麦面包', icon: 'fa-solid fa-bread-slice', desc: '膳食纤维丰富', minAge: 10, allergens: ['wheat'], tags: ['谷物', '纤维'], risk: 'safe' },\n { id: 14, name: '蓝莓', icon: 'fa-solid fa-blueberries', desc: '花青素，护眼抗氧化', minAge: 8, allergens: [], tags: ['水果', '抗氧化'], risk: 'safe' },\n { id: 15, name: '鸡肉泥', icon: 'fa-solid fa-drumstick-bite', desc: '优质蛋白，易吸收', minAge: 7, allergens: [], tags: ['肉类', '蛋白质'], risk: 'safe' },\n { id: 16, name: '核桃', icon: 'fa-solid fa-tree', desc: '补脑益智，需碾碎', minAge: 12, allergens: ['nut'], tags: ['坚果', 'DHA'], risk: 'danger' },\n { id: 17, name: '菠菜泥', icon: 'fa-solid fa-leaf', desc: '铁质丰富，搭配维C', minAge: 7, allergens: [], tags: ['绿叶菜', '铁'], risk: 'safe' },\n { id: 18, name: '燕麦粥', icon: 'fa-solid fa-utensils', desc: '温和易消化', minAge: 6, allergens: ['wheat'], tags: ['谷物', '易消化'], risk: 'safe' },\n ];\n\n // ========== 月龄提示 ==========\n const ageHints = {\n 4: '刚开始尝试，从单一谷物开始 🌱',\n 5: '可以尝试单一蔬果泥了 🥕',\n 6: '开始添加辅食的关键期 ✨',\n 7: '可以尝试蛋黄和肉类了 🥚',\n 8: '多样化搭配，引入蛋白质 🐟',\n 9: '尝试更多口感，锻炼咀嚼 🦷',\n 10: '可以尝试手指食物了 👶',\n 11: '接近一岁，食物种类更丰富 🎉',\n 12: '满一岁啦！可以尝试更多食材 🎂',\n 18: '幼儿期，基本可以吃家庭食物 🏠',\n 24: '两岁了，饮食接近成人 🧒'\n };\n\n // ========== 状态 ==========\n let currentAge = 6;\n let selectedAllergens = [];\n\n // ========== DOM 引用 ==========\n const ageSlider = document.getElementById('ageSlider');\n const ageNumber = document.getElementById('ageNumber');\n const ageHint = document.getElementById('ageHint');\n const sliderFill = document.getElementById('sliderFill');\n const allergenTags = document.querySelectorAll('.allergen-tag');\n const foodGrid = document.getElementById('foodGrid');\n const foodCount = document.getElementById('foodCount');\n\n // ========== 更新月龄 ==========\n function updateAge(val) {\n currentAge = parseInt(val);\n ageNumber.textContent = currentAge;\n \n // 提示\n const hints = Object.keys(ageHints).map(Number).sort((a,b) => a-b);\n let hintText = '';\n for (let i = hints.length - 1; i >= 0; i--) {\n if (currentAge >= hints[i]) {\n hintText = ageHints[hints[i]];\n break;\n }\n }\n if (!hintText && currentAge < 4) hintText = '宝宝还太小，再等等吧 💕';\n ageHint.textContent = hintText || '探索更多美味吧 🌟';\n\n // 更新进度条\n const pct = ((currentAge - 4) / (24 - 4)) * 100;\n sliderFill.style.width = Math.min(100, Math.max(0, pct)) + '%';\n\n // 更新刻度高亮\n document.querySelectorAll('.slider-marks span').forEach((el, idx) => {\n const markVals = [4, 8, 12, 18, 24];\n el.classList.toggle('active', currentAge >= markVals[idx]);\n });\n\n renderFoods();\n }\n\n ageSlider.addEventListener('input', (e) => {\n updateAge(e.target.value);\n });\n\n // ========== 过敏原切换 ==========\n allergenTags.forEach(tag => {\n tag.addEventListener('click', () => {\n const allergen = tag.dataset.allergen;\n tag.classList.toggle('active');\n \n if (tag.classList.contains('active')) {\n if (!selectedAllergens.includes(allergen)) {\n selectedAllergens.push(allergen);\n }\n } else {\n selectedAllergens = selectedAllergens.filter(a => a !== allergen);\n }\n renderFoods();\n });\n });\n\n // ========== 渲染食物 ==========\n function renderFoods() {\n // 过滤：月龄 >= minAge，且排除过敏原\n let filtered = foodDB.filter(food => {\n if (currentAge < food.minAge) return false;\n // 如果选择了过敏原，排除含有这些过敏原的食物\n if (selectedAllergens.length > 0) {\n const hasAllergen = food.allergens.some(a => selectedAllergens.includes(a));\n if (hasAllergen) return false;\n }\n return true;\n });\n\n // 按 minAge 排序\n filtered.sort((a, b) => a.minAge - b.minAge);\n\n foodCount.textContent = filtered.length + ' 种';\n\n if (filtered.length === 0) {\n foodGrid.innerHTML = `\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-face-smile\"></i>\n <p>当前月龄和过敏原条件下<br>暂无推荐食物</p>\n </div>\n `;\n return;\n }\n\n foodGrid.innerHTML = filtered.map((food, idx) => {\n const badgeMap = {\n 'safe': '<span class=\"card-badge\"><i class=\"fa-regular fa-circle-check\"></i> 安全</span>',\n 'caution': '<span class=\"card-badge warning\"><i class=\"fa-regular fa-clock\"></i> 谨慎</span>',\n 'danger': '<span class=\"card-badge danger\"><i class=\"fa-regular fa-circle-exclamation\"></i> 警惕</span>'\n };\n const badge = badgeMap[food.risk] || '';\n\n const tagHtml = food.tags.slice(0, 2).map(t => {\n const cls = t.includes('蛋白质') || t.includes('DHA') ? 'green' : \n t.includes('警惕') || t.includes('过敏') ? 'orange' : '';\n return `<span class=\"meta-tag ${cls}\">${t}</span>`;\n }).join('');\n