scottpan/msh-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: MSH System\n\n- msh_single_uniapp: Vue 2 + UniApp 前端（微信小程序/H5/App/支付宝小程序）\n- msh_crmeb_22: Spring Boot 2.2 后端（C端API/管理端/业务逻辑）\n- models-integration: AI服务集成（Coze/KieAI/腾讯ASR）\n- docs: 产品文档与设计稿

Browse Source
This commit is contained in:
scottpan
2026-02-28 05:40:21 +08:00
commit 14d29d51c0
2182 changed files with 482509 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

682
msh_single_uniapp/pages/tool/nutrient-detail.vue Normal file
View File

@@ -0,0 +1,682 @@
<template>
<view class="nutrient-detail-page">
<!-- 内容区域 -->
<scroll-view class="content-scroll" scroll-y>
<!-- 营养素头部横幅 -->
<view class="nutrient-header">
<view class="header-icon">
<text>{{ nutrientData.icon }}</text>
</view>
<view class="header-info">
<view class="header-name">{{ nutrientData.name }}</view>
<view class="header-english">{{ nutrientData.english }}</view>
<view class="header-desc">{{ nutrientData.description }}</view>
</view>
</view>
<!-- 适量控制状态卡片 -->
<view class="status-card">
<text class="status-icon">✅</text>
<text class="status-title">{{ nutrientData.status }}</text>
<text class="status-desc">{{ nutrientData.statusDesc }}</text>
</view>
<!-- 为什么重要？ -->
<view class="info-card">
<view class="card-header">
<view class="card-icon">
<image class="icon-img" :src="iconWhyImportant" mode="aspectFit"></image>
</view>
<text class="card-title">为什么重要？</text>
</view>
<text class="card-content">{{ nutrientData.importance }}</text>
</view>
<!-- 推荐摄入量 -->
<view class="info-card recommended">
<view class="card-header">
<view class="card-icon">
<image class="icon-img" :src="iconRecommendation" mode="aspectFit"></image>
</view>
<text class="card-title">推荐摄入量</text>
</view>
<view class="recommendation-box">
<text class="recommendation-text">{{ nutrientData.recommendation }}</text>
</view>
</view>
<!-- 主要食物来源 -->
<view class="info-card">
<view class="card-header">
<text class="card-icon-emoji">🥗</text>
<text class="card-title">主要食物来源</text>
</view>
<view class="food-sources">
<view
class="source-tag"
v-for="(source, index) in nutrientData.foodSources"
:key="index"
>
{{ source }}
</view>
</view>
</view>
<!-- 风险提示 -->
<view class="warning-card">
<view class="card-header">
<view class="warning-icon">!</view>
<text class="card-title">风险提示</text>
</view>
<text class="card-content">{{ nutrientData.riskWarning }}</text>
</view>
<!-- 实用建议 -->
<view class="info-card suggestions">
<view class="card-header">
<view class="card-icon">
<image class="icon-img" :src="iconSuggestions" mode="aspectFit"></image>
</view>
<text class="card-title">实用建议</text>
</view>
<view class="suggestions-list">
<view
class="suggestion-item"
v-for="(suggestion, index) in nutrientData.suggestions"
:key="index"
>
<view class="suggestion-number">{{ index + 1 }}</view>
<text class="suggestion-text">{{ suggestion }}</text>
</view>
</view>
</view>
<!-- 免责声明 -->
<view class="disclaimer-card">
<text class="disclaimer-icon">💡</text>
<text class="disclaimer-text">{{ nutrientData.disclaimer }}</text>
</view>
<!-- 底部安全距离 -->
<view class="safe-bottom"></view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
// 图标资源
iconWhyImportant: 'https://www.figma.com/api/mcp/asset/51e00c9b-5719-4391-9dff-68b70d24aece',
iconRecommendation: 'https://www.figma.com/api/mcp/asset/29e03ae9-a3ba-4416-8c6e-962bf3a8c8bb',
iconSuggestions: 'https://www.figma.com/api/mcp/asset/9027fced-f029-4f65-bba1-a0b5883b8d2b',
nutrientData: {
name: '钠',
english: 'Sodium (Na)',
icon: '🧂',
description: '调节体液平衡的电解质',
status: '适量控制',
statusDesc: '可适量补充，保持均衡',
importance: '钠参与调节体液平衡和血压，过多摄入会导致水肿和高血压，增加心血管负担。',
recommendation: 'CKD患者：2-3g食盐/天（相当于800-1200mg钠）',
foodSources: ['食盐', '酱油', '腌制食品', '加工肉类', '咸菜', '味精'],
riskWarning: '摄入过多会导致水肿、高血压、心力衰竭等问题。',
suggestions: [
'每日食盐控制在3-5g（约一啤酒瓶盖）',
'避免腌制、熏制食品',
'少用酱油、味精等调味品',
'可用葱姜蒜、柠檬汁调味',
'查看食品标签，选择低钠产品',
'透析患者控制饮水量'
],
disclaimer: '以上建议仅供参考，\n\r 具体方案请咨询您的医生或营养师'
}
}
},
onLoad(options) {
// 根据传入的营养素名称加载对应数据
if (options.name) {
this.loadNutrientData(options.name)
}
},
methods: {
loadNutrientData(name) {
const nutrientMap = {
'钠': {
name: '钠',
english: 'Sodium (Na)',
icon: '🧂',
description: '调节体液平衡的电解质',
status: '适量控制',
statusDesc: '可适量补充，保持均衡',
importance: '钠参与调节体液平衡和血压，过多摄入会导致水肿和高血压，增加心血管负担。',
recommendation: 'CKD患者：2-3g食盐/天（相当于800-1200mg钠）',
foodSources: ['食盐', '酱油', '腌制食品', '加工肉类', '咸菜', '味精'],
riskWarning: '摄入过多会导致水肿、高血压、心力衰竭等问题。',
suggestions: [
'每日食盐控制在3-5g（约一啤酒瓶盖）',
'避免腌制、熏制食品',
'少用酱油、味精等调味品',
'可用葱姜蒜、柠檬汁调味',
'查看食品标签，选择低钠产品',
'透析患者控制饮水量'
],
disclaimer: '以上建议仅供参考，具体方案请咨询您的主治医生或营养师'
},
'蛋白质': {
name: '蛋白质',
english: 'Protein',
icon: '🥩',
description: '构成人体组织的重要营养素',
status: '需控制',
statusDesc: '根据CKD分期调整摄入量',
importance: '蛋白质是人体细胞的基本组成成分，参与免疫功能和组织修复。但过多蛋白质会增加肾脏代谢负担，加速肾功能恶化。',
recommendation: 'CKD 1-2期：0.8-1.0g/kg/天\nCKD 3-5期（未透析）：0.6-0.8g/kg/天\n透析患者：1.0-1.2g/kg/天',
foodSources: ['鸡蛋', '鱼类', '瘦肉', '牛奶', '豆腐', '鸡胸肉'],
riskWarning: '过多蛋白质摄入会产生大量含氮废物，加重肾脏负担；过少则导致营养不良、免疫力下降。',
suggestions: [
'优先选择优质蛋白（鸡蛋、鱼、瘦肉）',
'控制植物蛋白摄入（豆类适量）',
'每餐均匀分配蛋白质',
'透析患者需适当增加蛋白质摄入',
'定期监测白蛋白水平',
'咨询营养师制定个性化方案'
],
disclaimer: '以上建议仅供参考，具体方案请咨询您的主治医生或营养师'
},
'钾': {
name: '钾',
english: 'Potassium (K)',
icon: '🍌',
description: '维持神经肌肉功能的重要元素',
status: '严格控制',
statusDesc: '高钾血症可危及生命',
importance: '钾离子参与维持心脏节律、神经传导和肌肉收缩。肾功能下降时，钾排泄减少，血钾升高可导致心律失常甚至心脏骤停。',
recommendation: 'CKD 3-5期：1500-2000mg/天\n透析患者：2000-2500mg/天（透析间期严格控制）',
foodSources: ['香蕉', '橙子', '土豆', '番茄', '菠菜', '蘑菇'],
riskWarning: '高钾血症可导致心律失常、肌肉无力，严重时危及生命。低钾同样有害，需保持平衡。',
suggestions: [
'避免高钾水果（香蕉、橙子、猕猴桃）',
'蔬菜先焯水再烹饪可减少30-50%的钾',
'避免饮用浓缩果汁和菜汤',
'少吃坚果、巧克力、干果',
'定期监测血钾水平',
'透析日可适当放宽限制'
],
disclaimer: '以上建议仅供参考，具体方案请咨询您的主治医生或营养师'
},
'磷': {
name: '磷',
english: 'Phosphorus (P)',
icon: '🥜',
description: '骨骼健康的重要矿物质',
status: '严格控制',
statusDesc: '高磷可导致骨病和血管钙化',
importance: '磷与钙共同维持骨骼健康。肾功能下降时磷排泄减少，血磷升高可导致继发性甲状旁腺功能亢进、骨质疏松和血管钙化。',
recommendation: 'CKD 3-5期及透析患者：800-1000mg/天\n血磷目标：1.13-1.78mmol/L',
foodSources: ['坚果', '动物内脏', '可乐', '加工食品', '奶酪', '蛋黄'],
riskWarning: '高磷血症可导致皮肤瘙痒、骨痛、血管钙化，增加心血管疾病风险。',
suggestions: [
'避免含磷添加剂的加工食品',
'限制坚果、动物内脏摄入',
'少喝碳酸饮料（含磷酸）',
'按医嘱服用磷结合剂（随餐服用）',
'选择低磷蛋白质来源（蛋白、鸡胸肉）',
'注意查看食品标签中的磷含量'
],
disclaimer: '以上建议仅供参考，具体方案请咨询您的主治医生或营养师'
},
'钙': {
name: '钙',
english: 'Calcium (Ca)',
icon: '🥛',
description: '骨骼和牙齿的主要成分',
status: '适量补充',
statusDesc: '需在医生指导下补充',
importance: '钙是骨骼和牙齿的主要成分，参与神经传导、肌肉收缩和血液凝固。CKD患者因维生素D代谢异常，常出现低钙高磷状态。',
recommendation: 'CKD患者：根据血钙水平调整\n一般建议：800-1000mg/天（含饮食和补充剂）',
foodSources: ['牛奶', '酸奶', '豆腐', '小白菜', '虾皮', '芝麻'],
riskWarning: '过量补钙可导致高钙血症和血管钙化；不足则加重骨质疏松。需根据血钙磷水平调整。',
suggestions: [
'根据血钙水平决定是否补充',
'优先通过食物获取钙质',
'避免同时大量补钙和补磷',
'按医嘱服用活性维生素D',
'定期监测血钙、血磷和PTH',
'钙剂与磷结合剂错开服用'
],
disclaimer: '以上建议仅供参考，具体方案请咨询您的主治医生或营养师'
},
'水分': {
name: '水分',
english: 'Water',
icon: '💧',
description: '生命活动必需的基础物质',
status: '需控制',
statusDesc: '根据尿量和透析情况调整',
importance: '水是人体最重要的组成部分，参与所有生理活动。肾功能下降时水分排泄减少，过多水分摄入可导致水肿、高血压和心力衰竭。',
recommendation: '非透析CKD患者：量出为入（前日尿量+500ml）\n血液透析患者：透析间期体重增加不超过干体重的3-5%\n腹膜透析患者：根据超滤量调整',
foodSources: ['饮用水', '汤类', '粥', '水果', '蔬菜', '饮料'],
riskWarning: '水分摄入过多可导致水肿、呼吸困难、血压升高；过少则可能引起脱水和低血压。',
suggestions: [
'记录每日饮水量和尿量',
'口渴时小口慢饮，避免大量饮水',
'减少含水量高的食物（西瓜、汤面）',
'用冰块含服缓解口渴',
'避免过咸食物（会增加渴感）',
'透析患者严格控制两次透析间体重增长'
],
disclaimer: '以上建议仅供参考，具体方案请咨询您的主治医生或营养师'
}
}
if (nutrientMap[name]) {
this.nutrientData = nutrientMap[name]
}
}
}
}
</script>
<style lang="scss" scoped>
.nutrient-detail-page {
min-height: 100vh;
background: linear-gradient(180deg, #f8f9fa 0%, #f4f5f7 100%);
display: flex;
flex-direction: column;
}
/* 内容滚动区域 */
.content-scroll {
flex: 1;
padding: 0;
}
/* 营养素头部横幅 */
.nutrient-header {
background: linear-gradient(135deg, #ff8844 0%, #ee6600 50%, #ff7722 100%);
padding: 48rpx 32rpx;
display: flex;
align-items: center;
gap: 32rpx;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
right: -80rpx;
top: -80rpx;
width: 256rpx;
height: 256rpx;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
filter: blur(60rpx);
}
.header-icon {
width: 160rpx;
height: 160rpx;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 8rpx rgba(255, 255, 255, 0.2), 0 16rpx 60rpx rgba(0, 0, 0, 0.15);
flex-shrink: 0;
position: relative;
z-index: 1;
text {
font-size: 96rpx;
}
}
.header-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8rpx;
position: relative;
z-index: 1;
}
.header-name {
font-size: 40rpx;
color: #ffffff;
font-weight: 500;
text-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.12);
}
.header-english {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}
.header-desc {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}
}
/* 适量控制状态卡片 */
.status-card {
background: linear-gradient(135deg, #fff8e1 0%, #fff4e6 100%);
border: 2rpx solid #ffa500;
border-radius: 24rpx;
margin: 30rpx 32rpx 32rpx;
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
box-shadow: 0 16rpx 60rpx rgba(255, 71, 87, 0.15);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
right: -60rpx;
top: -60rpx;
width: 192rpx;
height: 192rpx;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
filter: blur(40rpx);
}
.status-icon {
font-size: 60rpx;
position: relative;
z-index: 1;
}
.status-title {
font-size: 32rpx;
color: #2e3e5c;
font-weight: 500;
position: relative;
z-index: 1;
}
.status-desc {
font-size: 24rpx;
color: #9fa5c0;
position: relative;
z-index: 1;
}
}
/* 通用信息卡片 */
.info-card {
background: #ffffff;
border: 1rpx solid #d0dbea;
border-radius: 24rpx;
margin: 0 32rpx 24rpx;
padding: 32rpx;
}
.card-header {
display: flex;
align-items: center;
gap: 16rpx;
margin-bottom: 24rpx;
.card-icon {
width: 64rpx;
height: 64rpx;
background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
.icon-img {
width: 32rpx;
height: 32rpx;
}
}
.card-icon-emoji {
font-size: 36rpx;
line-height: 1;
}
.card-title {
font-size: 28rpx;
color: #2e3e5c;
font-weight: 500;
}
}
.card-content {
font-size: 28rpx;
color: #3e5481;
line-height: 1.6;
}
/* 推荐摄入量卡片 */
.recommended {
border-left: 6rpx solid #ff7722;
border-top: 1rpx solid #ff7722;
border-right: 1rpx solid #ff7722;
border-bottom: 1rpx solid #ff7722;
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.06);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
right: -60rpx;
top: -60rpx;
width: 160rpx;
height: 160rpx;
background: rgba(255, 244, 230, 0.5);
border-radius: 50%;
filter: blur(40rpx);
}
.card-icon {
background: linear-gradient(135deg, #ff8844 0%, #ff7722 100%);
}
}
.recommendation-box {
background: linear-gradient(135deg, #fff8e1 0%, #fff4e6 100%);
border: 1rpx solid rgba(255, 165, 0, 0.2);
border-radius: 24rpx;
padding: 32rpx;
}
.recommendation-text {
font-size: 28rpx;
color: #3e5481;
line-height: 1.6;
}
/* 主要食物来源 */
.food-sources {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-top: 24rpx;
}
.source-tag {
background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
border: 1rpx solid rgba(255, 136, 68, 0.3);
border-radius: 50rpx;
padding: 16rpx 28rpx;
font-size: 28rpx;
color: #ff7722;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
/* 风险提示卡片 */
.warning-card {
background: linear-gradient(135deg, #ffebee 0%, #ffe0e3 100%);
border-left: 6rpx solid #ff6b35;
border-top: 2rpx solid #ff6b35;
border-right: 2rpx solid #ff6b35;
border-bottom: 2rpx solid #ff6b35;
border-radius: 24rpx;
margin: 0 32rpx 24rpx;
padding: 32rpx;
box-shadow: 0 16rpx 60rpx rgba(255, 100, 100, 0.15);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
right: -60rpx;
top: -60rpx;
width: 192rpx;
height: 192rpx;
background: rgba(255, 100, 100, 0.1);
border-radius: 50%;
filter: blur(40rpx);
}
.card-header {
margin-bottom: 24rpx;
display: flex;
align-items: center;
gap: 16rpx;
}
.warning-icon {
width: 48rpx;
height: 48rpx;
background: #ff6b35;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #ffffff;
font-weight: bold;
flex-shrink: 0;
}
.card-title {
color: #ff6b35;
font-size: 28rpx;
}
}
/* 实用建议卡片 */
.suggestions {
background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
border: 2rpx solid rgba(255, 136, 68, 0.4);
box-shadow: 0 16rpx 60rpx rgba(255, 136, 68, 0.15);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
right: -60rpx;
top: -60rpx;
width: 192rpx;
height: 192rpx;
background: rgba(255, 136, 68, 0.1);
border-radius: 50%;
filter: blur(40rpx);
}
.card-icon {
background: linear-gradient(135deg, #ff9966 0%, #ff8844 100%);
}
}
.suggestions-list {
display: flex;
flex-direction: column;
gap: 24rpx;
}
.suggestion-item {
display: flex;
align-items: flex-start;
gap: 20rpx;
}
.suggestion-number {
width: 40rpx;
height: 40rpx;
background: #ff8844;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #ffffff;
font-weight: 500;
flex-shrink: 0;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.suggestion-text {
flex: 1;
font-size: 28rpx;
color: #3e5481;
line-height: 1.6;
}
/* 免责声明卡片 */
.disclaimer-card {
background: linear-gradient(135deg, #fff7f3 0%, #ffe8e0 100%);
border: 2rpx solid rgba(255, 140, 90, 0.3);
border-radius: 32rpx;
margin: 0 32rpx 32rpx;
padding: 32rpx;
display: flex;
align-items: center;
gap: 16rpx;
box-shadow: 0 8rpx 40rpx rgba(255, 107, 53, 0.1);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
right: -60rpx;
top: -60rpx;
width: 160rpx;
height: 160rpx;
background: rgba(255, 107, 53, 0.1);
border-radius: 50%;
filter: blur(40rpx);
}
.disclaimer-icon {
font-size: 36rpx;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.disclaimer-text {
flex: 1;
font-size: 28rpx;
color: #ff6b35;
line-height: 1.6;
text-align: center;
position: relative;
z-index: 1;
}
}
/* 底部安全距离 */
.safe-bottom {
height: 40rpx;
}
</style>