feat: 食谱管理选择餐品弹窗增加营养信息展示,对齐食谱规划页弹窗样式

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-20 17:46:37 +08:00
co-authored by Claude Opus 4.6
parent 815f641ed4
commit 86a0d619eb
+28 -14
View File
@@ -150,7 +150,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
/* ===== 餐品选择弹窗 ===== */
.dish-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;display:none;align-items:center;justify-content:center;}
.dish-modal-overlay.show{display:flex;}
.dish-modal{background:#fff;border-radius:var(--radius-lg);width:480px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.18);}
.dish-modal{background:#fff;border-radius:var(--radius-lg);width:540px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.18);}
.dish-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.dish-modal__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
.dish-modal__close{width:28px;height:28px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;}
@@ -165,9 +165,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
.dish-item__check{width:18px;height:18px;border:1.5px solid var(--border);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.dish-item.selected .dish-item__check{background:var(--primary);border-color:var(--primary);}
.dish-item.selected .dish-item__check::after{content:'';display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);}
.dish-item__info{display:flex;flex-direction:column;gap:2px;}
.dish-item__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.dish-item__name{font-size:var(--font-sm);color:var(--text-primary);}
.dish-item__cat{font-size:var(--font-xs);color:var(--text-placeholder);}
.dish-item__nutri{display:flex;gap:8px;margin-top:2px;}
.dish-item__nutri span{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
.dish-item__nutri span em{font-style:normal;color:var(--text-primary);font-weight:500;}
.dish-modal__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);}
.dish-modal__count{font-size:var(--font-sm);color:var(--text-secondary);}
.dish-modal__actions{display:flex;gap:8px;}
@@ -615,16 +618,26 @@ function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
/* ===== 餐品选择弹窗逻辑 ===== */
(function(){
var DISHES=[
{id:1,name:'白米饭',cat:'主食/米饭'},{id:2,name:'杂粮饭',cat:'主食/米饭'},
{id:3,name:'馒头',cat:'主食/面点'},{id:4,name:'花卷',cat:'主食/面点'},
{id:5,name:'小米粥',cat:'主食/粥品'},{id:6,name:'皮蛋瘦肉粥',cat:'主食/粥品'},
{id:7,name:'红烧肉',cat:'荤菜/猪肉'},{id:8,name:'糖醋排骨',cat:'荤菜/猪肉'},
{id:9,name:'清蒸鲈鱼',cat:'荤菜/水产'},{id:10,name:'宫保鸡丁',cat:'荤菜/禽类'},
{id:11,name:'西红柿炒蛋',cat:'素菜/蛋类'},{id:12,name:'清炒时蔬',cat:'素菜/叶菜'},
{id:13,name:'麻婆豆腐',cat:'菜/豆制品'},{id:14,name:'凉拌黄瓜',cat:'凉菜/蔬菜'},
{id:15,name:'酸辣土豆丝',cat:'菜/根茎'},{id:16,name:'紫菜蛋花汤',cat:'汤品/蛋汤'},
{id:17,name:'冬瓜排骨汤',cat:'汤品/肉汤'},{id:18,name:'水果拼盘',cat:'甜品/水果'},
{id:19,name:'绿豆汤',cat:'甜品/糖水'},{id:20,name:'煎饺',cat:'主食/面点'}
{id:1,name:'白米饭',cat:'主食/米饭',kcal:116,protein:2.6,carb:25.9,fat:0.3},
{id:2,name:'杂粮饭',cat:'主食/米饭',kcal:135,protein:4.1,carb:28.2,fat:1.0},
{id:3,name:'馒头',cat:'主食/面点',kcal:221,protein:7.0,carb:44.2,fat:1.1},
{id:4,name:'花卷',cat:'主食/面点',kcal:214,protein:6.4,carb:42.8,fat:1.3},
{id:5,name:'小米粥',cat:'主食/粥品',kcal:46,protein:1.4,carb:8.4,fat:0.7},
{id:6,name:'皮蛋瘦肉粥',cat:'主食/粥品',kcal:89,protein:5.2,carb:11.6,fat:2.4},
{id:7,name:'红烧肉',cat:'菜/猪肉',kcal:286,protein:14.2,carb:6.8,fat:22.5},
{id:8,name:'糖醋排骨',cat:'菜/猪肉',kcal:264,protein:16.8,carb:14.2,fat:15.6},
{id:9,name:'清蒸鲈鱼',cat:'荤菜/水产',kcal:105,protein:18.6,carb:0.8,fat:3.2},
{id:10,name:'宫保鸡丁',cat:'荤菜/禽类',kcal:198,protein:19.4,carb:8.6,fat:10.2},
{id:11,name:'西红柿炒蛋',cat:'素菜/蛋类',kcal:126,protein:7.8,carb:5.4,fat:8.2},
{id:12,name:'清炒时蔬',cat:'素菜/叶菜',kcal:62,protein:2.8,carb:4.6,fat:3.8},
{id:13,name:'麻婆豆腐',cat:'素菜/豆制品',kcal:142,protein:9.6,carb:5.2,fat:9.4},
{id:14,name:'凉拌黄瓜',cat:'凉菜/蔬菜',kcal:32,protein:1.2,carb:3.8,fat:1.4},
{id:15,name:'酸辣土豆丝',cat:'素菜/根茎',kcal:96,protein:2.4,carb:16.2,fat:3.0},
{id:16,name:'紫菜蛋花汤',cat:'汤品/蛋汤',kcal:38,protein:3.2,carb:2.4,fat:1.8},
{id:17,name:'冬瓜排骨汤',cat:'汤品/肉汤',kcal:72,protein:5.6,carb:3.2,fat:4.0},
{id:18,name:'水果拼盘',cat:'甜品/水果',kcal:56,protein:0.8,carb:13.2,fat:0.2},
{id:19,name:'绿豆汤',cat:'甜品/糖水',kcal:68,protein:2.4,carb:14.8,fat:0.3},
{id:20,name:'煎饺',cat:'主食/面点',kcal:198,protein:8.6,carb:22.4,fat:8.2}
];
var overlay=document.getElementById('dishOverlay');
@@ -663,8 +676,9 @@ function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
var sel=tempSelected.indexOf(d.id)!==-1;
html+='<div class="dish-item'+(sel?' selected':'')+'" data-id="'+d.id+'">'
+'<span class="dish-item__check"></span>'
+'<span class="dish-item__info"><span class="dish-item__name">'+d.name+'</span><span class="dish-item__cat">'+d.cat+'</span></span>'
+'</div>';
+'<span class="dish-item__info"><span class="dish-item__name">'+d.name+'</span><span class="dish-item__cat">'+d.cat+'</span>'
+'<div class="dish-item__nutri"><span>热量 <em>'+d.kcal+'</em>kcal</span><span>蛋白质 <em>'+d.protein+'</em>g</span><span>碳水 <em>'+d.carb+'</em>g</span><span>脂肪 <em>'+d.fat+'</em>g</span></div>'
+'</span></div>';
});
if(!html) html='<div style="padding:24px;text-align:center;color:#999;font-size:13px;">无匹配餐品</div>';
listEl.innerHTML=html;