后端前端移动开发【免费下载链接】SparkyFitnessSparkyFitness: Built for Families. Powered by AI. Track food, fitness, water, and health — together.项目地址https://gitcode.com/gh_mirrors/sp/SparkyFitness点击查看免费下载本文围绕 SparkyFitness 日记Diary页中的 Nutrition Summary 卡片展开系统讲解它的数据来源、营养计算原理、目标可视化逻辑与可定制机制。读完本文你将掌握每日宏量营养素卡路里、蛋白质、碳水、脂肪等摘要的完整技术实现以及它与 Reports 报告中微量营养素与长期趋势分析的边界分工并能在日常使用中利用复制、目标编辑、净碳水与能量单位切换等实战功能。功能定位Daily Diary 的营养仪表盘根据 官方功能文档SparkyFitness 提供了一套全面的营养摘要Nutrition Summary用于查看每日摄入的宏量营养素macronutrients而微量营养素micronutrients以及最近一周、一个月或自定义时间范围的趋势概览则位于 Reports 报告中。也就是说整个产品的营养可视化被划分为两个互补的层面Nutrition Summary日记内聚焦今天——当日各宏量营养素累计值与目标值的实时对比Reports报告页聚焦长期——微量营养素明细与跨周、跨月、自定义区间的趋势分析详见 Reports 功能文档。在 Web 前端中Nutrition Summary 由 NutritionSummaryCard.tsx 组件渲染并被注册为 Diary 页可拖拽网格DiaryWidgetGrid中的一个 widget。从 Diary.tsx 的 widget 注册表可以看到每个 widget 有固定的 keyenergy、nutrition、water、healthMetrics、各餐次卡片、exercise、caffeineNutrition Summary 的 key 为nutrition图标为Salad标题使用diary.nutritionSummary的 i18n 文案。卡片数据结构DayTotals 与 171 类营养字段NutritionSummaryCard 接收一个名为dayTotals的 Props其类型DayTotals定义了卡片能展示的全部营养字段见 NutritionSummaryCard.tsx字段含义单位calories能量内部以 kcal 存储kcal / kJ可切换protein/carbs/fat三大宏量营养素gdietary_fiber膳食纤维gsugars糖gsodium/potassium钠 / 钾mgcholesterol胆固醇mgsaturated_fat/monounsaturated_fat/polyunsaturated_fat/trans_fat各类脂肪gvitamin_a/vitamin_c/calcium/iron维生素与矿物质µg / mgcaffeine_mg咖啡因mgalcohol_g酒精gcustom_nutrients用户自定义营养素按自定义单位对应的服务端/共享常量定义在 constants/nutrients.ts 的CENTRAL_NUTRIENT_CONFIG中为每个营养字段统一登记了labeli18n key、defaultLabel、unit、colorTailwind 文本色、chartColor图表十六进制色、decimals小数位以及分组groupmacros/fats/minerals/custom。例如calories使用绿色#22c55e、protein使用蓝色#3b82f6、carbs使用橙色#f97316、fat使用黄色#eab308这些元数据被卡片和迷你趋势图共用保证摘要数字与趋势折线配色一致。每日合计的计算链路从食物记录到摘要数字摘要数字并非直接来自某个接口而是由前端工具函数逐条聚合而来完整链路记录在 nutritionCalculations.ts 中单条食物记录缩放calculateFoodEntryNutritionL27-L187优先使用食物变体food_variants/default_variant的快照营养数据按公式(nutrient_value_per_reference_size / effective_reference_size) * quantity_consumed将每条记录的实际摄入量换算为营养值effectiveReferenceSize默认取serving_size缺省 100。餐次合计getEntryNutritionL544-L584对餐次组合记录FoodEntryMeal直接复用后端已聚合好的营养值后端在创建时已按餐次数量缩放前端不得再次乘数量对独立食物记录则调用上一步的换算函数。全天聚合calculateDayTotalsL362-L468将当天所有独立条目与餐次记录的 171 类字段逐项累加得到MealTotals自定义营养素同样以Recordstring, number形式合并累加。补剂并入addSupplementTotalsL339-L360把当天记录的补剂剂量supplementTotals折算进营养摘要。从代码注释可以确认该函数覆盖FOOD_VARIANT_NUTRIENT_FIELDS全部字段而非仅宏量五项——这源于 issue #2145 的修正此前补剂携带的钙等微量营养素只在 Reports 中求和、却不出现在用户实际盯着的日记摘要卡片上。在 Diary.tsx 中dayTotals的最终值为const dayTotals addSupplementTotals( calculateDayTotals(foodEntries, foodEntryMeals), summaryData?.supplementTotals );代码注释特别强调摘要必须计入补剂剂量否则会与上方已经计入补剂的卡路里环calorie ring数值不一致。这一同一页面各 widget 数值口径必须一致的设计约束值得在二次开发时牢记。目标对比与状态可视化进度条、超额与达标NutritionSummaryCard 的核心交互是当前摄入 vs 目标的实时对比目标来源useDiaryGoals(selectedDate)获取当日目标若每日摘要接口返回了adjustedGoals由服务端根据当日情况调整则以调整后的 calories/protein/carbs/fat 覆盖原目标见 Diary.tsx。默认目标值未配置时使用 constants/goals.ts 的DEFAULT_GOALS例如热量 2000 kcal、蛋白质 150 g、碳水 250 g、脂肪 67 g、膳食纤维 25 g、钠 2300 mg、钾 3500 mg、钙 1000 mg、铁 18 mg 等。目标方向每个营养素可通过营养目标偏好被解析为minimum下限、maximum上限或target区间解析逻辑在 nutrientUtils.ts 的getNutrientMetadata中。内置的需控制上限营养素如饱和脂肪、钠、胆固醇等由共享常量BUILTIN_MAXIMUM_GOAL_NUTRIENTS统一标记defaultGoalType maximum见 constants/nutrients.ts。三态着色NutritionSummaryCard.tsx超出上限数字与进度条变红色#ef4444副标题显示超出 X g目标为区间但当前不在区间内变琥珀色#f59e0b达标未超上限或落在区间内数字旁显示绿色对勾CheckCircle2。进度条percentage goal 0 ? Math.min((comparisonTotal / goal) * 100, 100) : 0进度条颜色与数字状态一致封顶 100%。能量单位与净碳水两个实用的显示开关kcal / kJ 切换卡片通过energyUnit与convertEnergy两个 Props 支持能量单位换算。只有calories参与换算Math.round(convertEnergy(total, kcal, energyUnit))目标值、区间上下限同样换算后展示单位文案取自common.kcalUnit/common.kJUnit。净碳水Net Carbs当偏好showNetCarbs开启时碳水展示值由getNetCarbsValue(dayTotals.carbs, dayTotals.dietary_fiber)计算总碳水减膳食纤维标签改为nutrition.netCarbs且目标对比、进度条、迷你趋势图全部切换为净碳水口径NutritionSummaryCard.tsx。该行为有专门测试保障见 NutritionSummaryCard.test.tsx。可定制的营养素显示范围摘要卡片默认展示Object.keys(DEFAULT_GOALS)中的全部营养字段但用户可以通过营养素显示偏好nutrientDisplayPreferences按视图分组与平台定制可见列表const summaryPreferences nutrientDisplayPreferences.find( (p) p.view_group summary p.platform platform ); const visibleNutrients summaryPreferences ? summaryPreferences.visible_nutrients : Object.keys(DEFAULT_GOALS);见 NutritionSummaryCard.tsx其中view_group summary限定摘要视图、platform取desktop | mobile由useIsMobile()判定因此桌面端与手机端可以各自保存一套显示方案。对应的设置界面说明见 nutrient-display-settings.md。自定义营养素customNutrients也会按名称合并进元数据解析与数值读取dayTotals.custom_nutrients?.[nutrient] ?? 0因此用户自建的营养素同样能出现在摘要卡片上。卡片上的快捷操作NutritionSummaryCard 的标题栏提供三个高频操作按钮NutritionSummaryCard.tsx按钮行为对应 APIClipboardCopy将整个当天的食物记录复制到指定日期useCopyAllFoodEntriesMutationHistory把昨天的全部食物记录复制到今天useCopyAllFoodEntriesFromYesterdayMutationEditGoalsForToday打开编辑今日目标弹窗EditGoalsForToday组件复制整个日记的操作由CopyFoodEntryDialog承接复制后各餐次的营养值与日期时间均被保留全天合计不变——这与 meals.md 中餐次类别删除时移动条目同样保持当日合计不变的设计原则一致。14 天迷你趋势摘要卡内的内联折线摘要卡片底部通过 MiniNutritionTrends.tsx 内联展示每个可见营养素的14 天迷你趋势折线图recharts 实现时间范围以所选日期为终点向前推 13 天即start selectedDate - 13天end selectedDateL202-L209。数据来源useMiniNutritionTrendData(userId, start, end)Hook 拉取每日汇总序列DayData[]。可见营养素与主卡片共用同一份view_group summary的显示偏好无偏好时默认展示[calories, protein, carbs, fat, dietary_fiber]L233-L239。净碳水联动开启showNetCarbs时趋势数据中的 carbs 同样先经getNetCarbsValue换算再绘图L241-L246。工具提示自定义 Tooltip 按用户时区格式化日期MMM dd能量字段同样走 kcal/kJ 换算保证悬浮值与主卡片口径一致。需要留意的是14 天迷你趋势只服务摘要内快速回看它与 Reports 中的上周/上月/自定义区间趋势不是同一功能。原文档明确将微量营养素明细与跨周、跨月、自定义区间趋势划归 Reports 功能文档此外通过 Android 应用或 iOS 快捷指令同步的可穿戴指标会出现在 Reports 页底部。因此日常使用建议是日记摘要看今天吃得够不够Reports 看一段时间吃得怎么样、微量营养是否均衡。测试与质量保障该功能在前端有直接对应的测试资产NutritionSummaryCard.test.tsx验证默认展示总碳水、开启净碳水时碳水减纤维、以及可见营养素列表来自visible_nutrients等行为nutrientColumnCoverage.test.ts作为契约测试确保前端营养字段覆盖与服务端/共享字段口径一致。这保证了摘要卡片在显示偏好变更、净碳水开关、能量单位切换等常见场景下行为可回归。小结SparkyFitness 的 Nutrition Summary 表面上只是一张今日宏量营养素卡片背后却串联了完整的营养计算管线calculateFoodEntryNutrition的单条缩放 →calculateDayTotals的全天聚合 →addSupplementTotals的补剂并入 →getNutrientMetadata的目标方向解析与三态着色渲染再叠加 kcal/kJ 切换、净碳水、按平台可定制的可见字段与 14 天迷你趋势。掌握这条链路无论是日常使用、二次开发还是排查摘要与卡路里环数字不一致之类的问题都能快速定位到 nutritionCalculations.ts 与 NutritionSummaryCard.tsx 这两个核心文件。赞分享后端前端移动开发【免费下载链接】SparkyFitnessSparkyFitness: Built for Families. Powered by AI. Track food, fitness, water, and health — together.项目地址https://gitcode.com/gh_mirrors/sp/SparkyFitness点击查看免费下载相关推荐去重在采集时做而不是最后做AI 浏览器 Agent 采集数据的去重完整指南去重在采集时做而不是最后做AI 浏览器 Agent 采集数据的去重完整指南 任何超过一页的采集任务都会产生重复数据。重复有四种来源、需要四种不同的对策而后端前端移动开发终极食材营养成分表揭秘每100g食物营养密码终极食材营养成分表揭秘每100g食物营养密码 CookLikeHOC是一个专注于复刻老乡鸡菜品的开源项目汇集了多种家常菜的详细制作方法和配料信息。本文将为你文档知识库教程TimelineJS营养科学从维生素发现到个性化营养时间轴TimelineJS营养科学从维生素发现到个性化营养时间轴 引言 在当今信息爆炸的时代如何清晰、直观地展示复杂的历史事件和发展脉络成为一项重要挑战。对于营养前端数据可视化上一篇TouchGal重塑Galgame爱好者交流体验的革新平台下一篇终极Modbus调试神器OpenModScan完整实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考