欢迎加入开源鸿蒙PC社区：
https://harmonypc.csdn.net/

atomgit仓库地址： https://atomgit.com/tizibanfan/yinliaohantangliang

一、项🍹目概述

饮料含糖量查询应用是一款帮助用户了解日常饮品糖分含量的健康工具。该应用包含48种常见饮料的详细数据，支持搜索、分类筛选、详情查看和对比功能，帮助用户做出更健康的饮品选择。

1.1 系统架构设计

┌─────────────────────────────────────────────────────────────┐
│                  饮料含糖量查询系统                          │
├─────────────────────────────────────────────────────────────┤
│                    UI层 (index.html)                        │
│  ┌───────────┬───────────┬───────────┬───────────┐        │
│  │  搜索区域  │  统计卡片  │  饮料列表  │  对比区域  │        │
│  └───────────┴───────────┴───────────┴───────────┘        │
├─────────────────────────────────────────────────────────────┤
│                  业务逻辑层 (app.js)                         │
│  ┌────────────┬────────────┬────────────┬────────────┐     │
│  │  数据管理   │  筛选过滤   │  详情展示   │  对比功能   │     │
│  └────────────┴────────────┴────────────┴────────────┘     │
├─────────────────────────────────────────────────────────────┤
│                    数据层 (Mock数据)                        │
│  ┌──────────────────────────────────────────────────────┐  │
│  │    48种饮料数据（分类、含糖量、热量、容量）            │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

1.2 核心功能模块

模块	功能描述	技术要点
搜索功能	按饮料名称模糊搜索	字符串匹配、实时过滤
分类筛选	7大分类切换	数据分类、状态管理
详情展示	饮料详细信息、糖分可视化	模态框、进度条动画
对比功能	最多3种饮料对比	状态管理、列表操作
统计卡片	实时统计数据	DOM操作、数据计算

---

二、数据模型设计

2.1 饮料数据结构

{
    id: 1,                    // 唯一标识
    name: '可口可乐',           // 饮料名称
    icon: '🥤',               // Emoji图标
    sugar: 10.6,              // 总含糖量（g）
    calories: 42,             // 热量（kcal）
    volume: 330,              // 容量（ml）
    category: 'carbonated'    // 分类
}

2.2 分类映射表

{
    'all': '全部',
    'carbonated': '碳酸饮料',
    'juice': '果汁',
    'tea': '茶饮',
    'coffee': '咖啡',
    'milk': '奶类',
    'water': '其他饮品'
}

2.3 糖分等级标准

等级	阈值	标识	含义
low	< 5g/100ml	🟢 绿色	低糖/无糖
medium	5-15g/100ml	🟡 黄色	中等含糖
high	> 15g/100ml	🔴 红色	高糖

---

三、核心代码实现详解

3.1 应用类设计

class BeverageSugarApp {
    constructor() {
        this.beverages = this.getBeverageData();
        this.filteredBeverages = [...this.beverages];
        this.compareList = [];
        this.currentCategory = 'all';
        this.currentSearch = '';
        this.init();
    }

    init() {
        this.initDOMReferences();
        this.bindEventListeners();
        this.renderBeverageList();
        this.updateStats();
    }
}

设计要点：

• 初始化时加载所有饮料数据
• 维护过滤后的饮料列表
• 管理对比列表状态
• 初始化DOM引用和事件监听

3.2 糖分等级判断算法

getSugarLevel(sugar) {
    if (sugar < 5) return 'low';
    if (sugar < 15) return 'medium';
    return 'high';
}

getSugarLevelText(level) {
    const texts = {
        low: '低糖/无糖',
        medium: '中等含糖',
        high: '高糖'
    };
    return texts[level] || '未知';
}

算法逻辑：

• 根据每100ml含糖量判断等级
• 使用映射表转换为中文描述
• 支持扩展更多等级

3.3 健康建议生成

getHealthTip(sugar) {
    if (sugar < 5) {
        return '这款饮品含糖量较低，是健康的选择！建议适量饮用。';
    } else if (sugar < 15) {
        return '这款饮品含糖量适中，建议每天饮用不超过一瓶。';
    } else {
        return '⚠️ 这款饮品属于高糖饮料，长期过量饮用可能增加肥胖、糖尿病等健康风险，建议尽量少喝。';
    }
}

个性化建议：

• 根据糖分等级提供不同建议
• 低糖：鼓励选择
• 中糖：提醒适量
• 高糖：警示风险

3.4 搜索与筛选功能

filterBeverages() {
    this.filteredBeverages = this.beverages.filter(beverage => {
        const matchCategory = this.currentCategory === 'all' || 
            beverage.category === this.currentCategory;
        const matchSearch = this.currentSearch === '' || 
            beverage.name.toLowerCase().includes(this.currentSearch);
        return matchCategory && matchSearch;
    });
    
    this.renderBeverageList();
    this.updateStats();
}

过滤逻辑：

• 分类筛选：匹配当前选中分类或显示全部
• 搜索过滤：模糊匹配饮料名称（不区分大小写）
• 双重条件：同时满足分类和搜索条件

3.5 饮料列表渲染

renderBeverageList() {
    if (this.filteredBeverages.length === 0) {
        this.beverageList.innerHTML = `
            <div style="grid-column: 1 / -1; text-align: center; padding: 40px;">
                <div style="font-size: 4rem; margin-bottom: 20px;">🔍</div>
                <p style="font-size: 1.2rem; color: #666;">未找到符合条件的饮料</p>
            </div>
        `;
        return;
    }
    
    this.beverageList.innerHTML = this.filteredBeverages.map(beverage => {
        const level = this.getSugarLevel(beverage.sugar);
        const sugarPer100ml = (beverage.sugar / beverage.volume * 100).toFixed(1);
        
        return `
            <div class="beverage-card ${level}-sugar" data-id="${beverage.id}">
                <div class="beverage-icon">${beverage.icon}</div>
                <div class="beverage-name">${beverage.name}</div>
                <div class="beverage-sugar ${level}">${sugarPer100ml}g/100ml</div>
                <div class="beverage-info">${beverage.volume}ml · ${beverage.calories} kcal</div>
                <span class="sugar-level ${level}">${this.getSugarLevelText(level)}</span>
                <button class="add-compare-btn" onclick="app.addToCompare(${beverage.id})">➕ 添加对比</button>
            </div>
        `;
    }).join('');
    
    this.bindCardClickEvents();
}

渲染策略：

• 空状态处理：显示友好的提示信息
• 动态计算：每100ml含糖量 = 总含糖量 / 容量 * 100
• 颜色编码：根据糖分等级应用不同样式类
• 事件绑定：为卡片添加点击事件

3.6 详情弹窗展示

showDetail(id) {
    const beverage = this.beverages.find(b => b.id === id);
    if (!beverage) return;
    
    const level = this.getSugarLevel(beverage.sugar);
    const sugarPer100ml = (beverage.sugar / beverage.volume * 100).toFixed(1);
    const sugarCubes = (beverage.sugar / 4).toFixed(1);  // 每块方糖约4g
    
    document.getElementById('detailName').textContent = beverage.name;
    document.getElementById('detailIcon').textContent = beverage.icon;
    document.getElementById('detailSugar').textContent = 
        `${beverage.sugar}g (${sugarPer100ml}g/100ml)`;
    document.getElementById('detailCalories').textContent = `${beverage.calories} kcal`;
    document.getElementById('detailVolume').textContent = `${beverage.volume}ml`;
    document.getElementById('detailLevel').textContent = this.getSugarLevelText(level);
    document.getElementById('detailEquivalent').textContent = `${sugarCubes} 块方糖`;
    
    const sugarBar = document.getElementById('sugarBarFill');
    sugarBar.className = `sugar-fill ${level}`;
    sugarBar.style.width = `${Math.min(sugarPer100ml * 4, 100)}%`;
    
    document.getElementById('healthTips').querySelector('p').textContent = 
        this.getHealthTip(parseFloat(sugarPer100ml));
    
    this.detailModal.classList.add('active');
}

详情展示内容：

• 基本信息：名称、图标、容量、热量
• 糖分数据：总含糖量、每100ml含糖量、等效方糖数
• 可视化：动态进度条显示糖分比例
• 健康建议：根据糖分等级生成个性化建议

3.7 对比功能实现

addToCompare(id) {
    if (this.compareList.length >= 3) {
        alert('最多只能对比3种饮料');
        return;
    }
    
    if (this.compareList.includes(id)) {
        alert('该饮料已在对比列表中');
        return;
    }
    
    this.compareList.push(id);
    this.renderCompareSlots();
}

renderCompareSlots() {
    this.compareSlots.forEach((slot, index) => {
        if (this.compareList[index]) {
            const beverage = this.beverages.find(b => b.id === this.compareList[index]);
            const level = this.getSugarLevel(beverage.sugar);
            const sugarPer100ml = (beverage.sugar / beverage.volume * 100).toFixed(1);
            
            slot.innerHTML = `
                <div class="beverage-icon">${beverage.icon}</div>
                <div class="beverage-name">${beverage.name}</div>
                <div class="beverage-sugar ${level}">${sugarPer100ml}g/100ml</div>
            `;
            slot.classList.remove('empty');
            slot.classList.add('has-content');
        } else {
            slot.innerHTML = '<span class="slot-text">点击饮料添加</span>';
            slot.classList.remove('has-content');
            slot.classList.add('empty');
        }
    });
    
    this.clearCompareBtn.style.display = this.compareList.length > 0 ? 'inline-block' : 'none';
}

对比功能特点：

• 最多支持3种饮料对比
• 防止重复添加
• 动态更新对比区域UI
• 显示/隐藏清空按钮

3.8 统计数据更新

updateStats() {
    const total = this.filteredBeverages.length;
    const highSugar = this.filteredBeverages.filter(
        b => this.getSugarLevel(b.sugar) === 'high'
    ).length;
    const lowSugar = this.filteredBeverages.filter(
        b => this.getSugarLevel(b.sugar) === 'low'
    ).length;
    
    this.totalCount.textContent = total;
    this.highSugarCount.textContent = highSugar;
    this.lowSugarCount.textContent = lowSugar;
}

统计维度：

• 饮料总数
• 高糖饮料数量
• 低糖/无糖饮料数量

---

四、UI交互设计

4.1 响应式布局

.beverage-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .beverage-list {
        grid-template-columns: 1fr;
    }
}

布局策略：

• 桌面端：多列网格布局
• 平板端：自适应列数
• 移动端：单列布局

4.2 颜色编码系统

.beverage-card.low-sugar {
    border-left-color: #27ae60;
}

.beverage-card.medium-sugar {
    border-left-color: #f39c12;
}

.beverage-card.high-sugar {
    border-left-color: #e74c3c;
}

.beverage-sugar.low { color: #27ae60; }
.beverage-sugar.medium { color: #f39c12; }
.beverage-sugar.high { color: #e74c3c; }

颜色含义：

• 🟢 绿色：低糖/无糖，健康选择
• 🟡 黄色：中等含糖，适量饮用
• 🔴 红色：高糖，需要注意

4.3 渐变背景设计

body {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ffecd2 100%);
}

视觉效果：

• 温暖的橙色调渐变
• 营造健康、活力的氛围
• 与食物主题相呼应

4.4 动画效果

.beverage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.modal-content {
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

动画效果：

• 卡片悬停：上浮+阴影增强
• 模态框：淡入+下滑
• 进度条：平滑过渡

---

五、数据统计分析

5.1 饮料分类统计

分类	数量	占比	平均含糖量(g/100ml)
碳酸饮料	8	16.7%	7.8
果汁	8	16.7%	10.3
茶饮	8	16.7%	2.6
咖啡	6	12.5%	7.5
奶类	8	16.7%	5.7
其他饮品	10	20.8%	3.1

5.2 糖分等级分布

等级	数量	占比
低糖/无糖	22	45.8%
中等含糖	21	43.8%
高糖	5	10.4%

5.3 健康建议分布

// 健康建议生成逻辑
getHealthTip(sugar) {
    if (sugar < 5) {
        return '低糖建议';
    } else if (sugar < 15) {
        return '中糖建议';
    } else {
        return '高糖警示';
    }
}

---

六、性能优化策略

6.1 DOM引用缓存

initDOMReferences() {
    this.searchInput = document.getElementById('searchInput');
    this.searchBtn = document.getElementById('searchBtn');
    this.categoryTabs = document.querySelectorAll('.tab');
    // ... 更多引用
}

优化效果：

• 避免重复DOM查询
• 提升渲染性能
• 代码结构更清晰

6.2 事件委托

document.addEventListener('click', (e) => {
    if (e.target === this.detailModal) {
        this.closeModal();
    }
});

优化策略：

• 使用事件委托处理模态框关闭
• 减少事件监听器数量
• 提升性能和内存效率

6.3 批量DOM操作

this.beverageList.innerHTML = this.filteredBeverages.map(beverage => {
    // 生成卡片HTML
}).join('');

优化效果：

• 一次性渲染所有卡片
• 减少DOM重排次数
• 提升列表渲染性能

---

七、扩展性设计

7.1 数据扩展

getBeverageData() {
    return [
        // 现有数据...
        { id: 49, name: '新饮料', icon: '🍹', sugar: 5.0, calories: 20, volume: 330, category: 'water' },
    ];
}

扩展方式：

• 在数组中添加新饮料对象
• 自动参与搜索、筛选和对比

7.2 分类扩展

// 添加新分类
category: 'sports'  // 运动饮料

// 更新分类标签
<button class="tab" data-category="sports">运动饮料</button>

扩展步骤：

1. 在数据中添加新分类标识
2. 在HTML中添加新标签
3. CSS自动适配样式

7.3 功能扩展

// 示例：添加收藏功能
addFavorite(id) {
    const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
    if (!favorites.includes(id)) {
        favorites.push(id);
        localStorage.setItem('favorites', JSON.stringify(favorites));
    }
}

扩展建议：

• 添加收藏功能
• 支持数据导出
• 集成健康资讯

---

八、测试与验证

8.1 功能测试用例

测试场景	输入	预期结果
搜索饮料	输入"可乐"	显示可口可乐、百事可乐、无糖可乐
分类筛选	选择"果汁"	只显示果汁类饮料
点击卡片	点击任意卡片	显示详情弹窗
添加对比	点击"添加对比"	饮料加入对比区域
对比上限	添加4种饮料	提示"最多只能对比3种饮料"
重复添加	重复添加同一饮料	提示"该饮料已在对比列表中"

8.2 边界条件测试

测试场景	测试内容	预期结果
空搜索	不输入内容	显示所有饮料
无结果	搜索不存在的饮料	显示"未找到符合条件的饮料"
清空对比	点击清空按钮	对比区域清空
关闭弹窗	点击遮罩层	弹窗关闭

8.3 响应式测试

设备尺寸	测试内容
1920x1080	多列网格布局正常
768x1024	响应式布局切换
375x667	单列布局正常

---

九、总结

饮料含糖量查询应用通过简洁的界面设计和丰富的功能，帮助用户了解日常饮品的糖分含量，做出更健康的选择。

核心优势

1. 数据丰富：包含48种常见饮料的详细数据
2. 功能完善：搜索、筛选、详情、对比一应俱全
3. 视觉友好：颜色编码直观区分糖分等级
4. 响应式设计：支持各种设备
5. 健康导向：提供个性化健康建议

技术亮点

• 面向对象设计：代码结构清晰，易于维护
• 数据驱动：基于真实数据提供有价值的信息
• 交互流畅：平滑的动画和响应
• 扩展性强：易于添加新功能和数据

未来扩展方向

1. 用户收藏：保存喜欢的饮料
2. 数据同步：云端存储个人数据
3. 健康报告：生成个人饮用习惯报告
4. 社交分享：分享健康建议到社交平台
5. AI推荐：基于用户偏好推荐健康饮品

---

附录：饮料数据参考

A.1 饮料分类明细

碳酸饮料（8种）

• 可口可乐、百事可乐、雪碧、芬达橙味、美年达、七喜、无糖可乐、无糖雪碧

果汁（8种）

• 苹果汁、橙汁、葡萄汁、芒果汁、菠萝汁、番茄汁、西柚汁、柠檬汁

茶饮（8种）

• 冰红茶、绿茶、茉莉花茶、奶茶、无糖奶茶、乌龙茶、普洱茶、柠檬茶

咖啡（6种）

• 美式咖啡、拿铁、卡布奇诺、摩卡、焦糖玛奇朵、无糖拿铁

奶类（8种）

• 纯牛奶、低脂牛奶、脱脂牛奶、巧克力牛奶、草莓牛奶、豆奶、杏仁奶、椰奶

其他饮品（10种）

• 矿泉水、纯净水、苏打水、运动饮料、蜂蜜水、椰子水、能量饮料、酸奶、无糖酸奶、豆浆

A.2 健康知识

每日推荐摄入量

• 世界卫生组织建议：成年人每日添加糖摄入量应控制在25克以下
• 约等于6块方糖（每块约4克）

高糖饮料危害

• 增加肥胖风险
• 增加糖尿病风险
• 影响牙齿健康
• 可能导致心血管疾病

健康选择建议

1. 优先选择无糖或低糖饮品
2. 每天饮用不超过1瓶含糖饮料
3. 多喝白开水
4. 注意查看营养成分表