实现 饮食热量 工具

分类：developer ｜ 标签：卡路里、热量、饮食 按食物重量估算热量

2.1 功能说明

按食物重量估算热量

2.1.1 使用指南

功能说明

按食物与食用重量估算热量摄入（数据基于常见食物每 100g 近似值）。

使用场景

饮食记录、热量控制。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• add()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const foods = [
  { name: '米饭(熟)', kcal: 116 }, { name: '白面包', kcal: 265 }, { name: '鸡蛋', kcal: 144 },
  { name: '鸡胸肉', kcal: 133 }, { name: '牛肉(瘦)', kcal: 125 }, { name: '猪肉(瘦)', kcal: 143 },
  { name: '牛奶', kcal: 54 }, { name: '苹果', kcal: 52 }, { name: '香蕉', kcal: 89 },
  { name: '番茄', kcal: 18 }, { name: '土豆', kcal: 77 }, { name: '西兰花', kcal: 34 },
  { name: '面条(熟)', kcal: 110 }, { name: '豆腐', kcal: 76 }, { name: '酸奶', kcal: 72 }, { name: '巧克力', kcal: 546 }
]
const food = ref('米饭(熟)')
const grams = ref(100)
const items = ref([])
const total = computed(() => items.value.reduce((s, i) => s + i.kcal, 0))

function add() {
  const f = foods.find(x => x.name === food.value)
  const g = Number(grams.value)
  if (!f || !(g > 0)) return
  items.value.push({ name: f.name, grams: g, kcal: Math.round(f.kcal * g / 100) })
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/calorie