feat: 营养管理模块页面重构及新增检验页面，创建其他终端目录结构
- 新增营养质检-新增检验二级页面(prod-qc-nutrition-add.html) - 重构餐品总库、食物成分、餐品新增等页面 - 删除已废弃的 din-dish-composition.html - 新增数据库设计文档 - 创建 other-module 目录结构（小程序/应急大屏/医疗PAD） - 更新项目背景文档新增其他终端模块定义 - 同步更新 index.html SITE_MAP Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
+20
-6
@@ -57,7 +57,7 @@ body { background: var(--background); font-family: -apple-system, BlinkMacSystem
|
||||
|
||||
/* ===== 模块网格 ===== */
|
||||
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; align-items: stretch; }
|
||||
.module-grid--center { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; max-width: 960px; margin: 0 auto; align-items: stretch; }
|
||||
.module-grid--center { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin: 0 auto; align-items: stretch; }
|
||||
|
||||
/* ===== 角色分组 ===== */
|
||||
.role-group { margin-bottom: 28px; text-align: center; }
|
||||
@@ -71,6 +71,9 @@ body { background: var(--background); font-family: -apple-system, BlinkMacSystem
|
||||
.role-icon--onsite { background: linear-gradient(135deg, #faad14, #ffc53d); }
|
||||
.role-icon--admin { background: linear-gradient(135deg, #eb2f96, #ff85c0); }
|
||||
.role-icon--shared { background: linear-gradient(135deg, #13c2c2, #5cdbd3); }
|
||||
.role-icon--miniprogram { background: linear-gradient(135deg, #52c41a, #95de64); }
|
||||
.role-icon--screen { background: linear-gradient(135deg, #722ED1, #b37feb); }
|
||||
.role-icon--pad { background: linear-gradient(135deg, #1677FF, #69b1ff); }
|
||||
|
||||
/* ===== 呼吸灯动画 ===== */
|
||||
@keyframes breathe {
|
||||
@@ -165,12 +168,13 @@ const ICONS = {
|
||||
web: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><rect x="1" y="2" width="16" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/><line x1="5" y1="16" x2="13" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="9" y1="14" x2="9" y2="16" stroke="currentColor" stroke-width="1.5"/></svg>',
|
||||
app: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><rect x="4" y="1" width="10" height="16" rx="2" stroke="currentColor" stroke-width="1.5"/><line x1="7.5" y1="14" x2="10.5" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
|
||||
emergency: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><path d="M9 1L2 6.5V16h5v-4h4v4h5V6.5L9 1z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M9 7v3M9 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
|
||||
other: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><rect x="1" y="3" width="7" height="5" rx="1" stroke="currentColor" stroke-width="1.3"/><rect x="10" y="3" width="7" height="5" rx="1" stroke="currentColor" stroke-width="1.3"/><rect x="1" y="10" width="7" height="5" rx="1" stroke="currentColor" stroke-width="1.3"/><rect x="10" y="10" width="7" height="5" rx="1" stroke="currentColor" stroke-width="1.3"/></svg>',
|
||||
page: '<svg width="14" height="14" viewBox="0 0 12 12" fill="none"><path d="M3 1h4l3 3v7H3V1z" stroke="currentColor" stroke-width="1.1"/><path d="M7 1v3h3" stroke="currentColor" stroke-width="1.1"/></svg>',
|
||||
dialog: '<svg width="14" height="14" viewBox="0 0 12 12" fill="none"><rect x="1.5" y="2" width="9" height="8" rx="1.5" stroke="currentColor" stroke-width="1.1"/><line x1="4" y1="5" x2="8" y2="5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><line x1="4" y1="7.5" x2="6.5" y2="7.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/></svg>',
|
||||
empty: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.2" stroke-dasharray="3 2"/><path d="M8 5.5v3M8 10v.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>',
|
||||
prd: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><path d="M4 1h7l4 4v12H4V1z" stroke="currentColor" stroke-width="1.5"/><path d="M11 1v4h4" stroke="currentColor" stroke-width="1.5"/><line x1="7" y1="9" x2="13" y2="9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="7" y1="12" x2="11" y2="12" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>',
|
||||
prdSmall: '<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 1h5l2.5 2.5v7.5h-7.5V1z" stroke="currentColor" stroke-width="1"/><path d="M7.5 1v2.5h2.5" stroke="currentColor" stroke-width="1"/></svg>',
|
||||
role: { expert:'👨⚕', assistant:'🤖', operator:'📋', professional:'👷', onsite:'🏥', admin:'⚙', shared:'🔗' }
|
||||
role: { expert:'👨⚕', assistant:'🤖', operator:'📋', professional:'👷', onsite:'🏥', admin:'⚙', shared:'🔗', miniprogram:'📱', screen:'🖥', pad:'📋' }
|
||||
};
|
||||
|
||||
const SITE_MAP = [
|
||||
@@ -277,6 +281,7 @@ const SITE_MAP = [
|
||||
{ file:'prod-proc-stats.html', label:'加工统计' },
|
||||
{ file:'prod-qc-daily.html', label:'日常质检' },
|
||||
{ file:'prod-qc-nutrition.html', label:'营养质检' },
|
||||
{ file:'prod-qc-nutrition-add.html', label:'营养质检-新增' },
|
||||
{ file:'ano-dirty.html', label:'系统脏数据' },
|
||||
{ file:'ano-result.html', label:'结果异常' }
|
||||
]},
|
||||
@@ -638,7 +643,14 @@ const SITE_MAP = [
|
||||
{file:'index.html',label:'消息列表'},{file:'contacts.html',label:'通讯录'},{file:'im-chat.html',label:'聊天'}
|
||||
]}
|
||||
]
|
||||
}
|
||||
},
|
||||
{ id:'other-terminals', label:'其他终端', icon:'other', color:'#b37feb', modules:[
|
||||
{ name:'营养管理小程序', dir:'other-terminals/mini-program', pages:[] },
|
||||
{ name:'西安应急中心大屏', dir:'other-terminals/emergency-screen/xian-center', pages:[] },
|
||||
{ name:'标准版中心大屏', dir:'other-terminals/emergency-screen/standard-center', pages:[] },
|
||||
{ name:'九厂应急中心大屏', dir:'other-terminals/emergency-screen/jiuchang-center', pages:[] },
|
||||
{ name:'医疗点PAD端', dir:'other-terminals/medical-pad', pages:[] }
|
||||
]}
|
||||
];
|
||||
|
||||
/* ===== 渲染逻辑 ===== */
|
||||
@@ -741,9 +753,11 @@ SITE_MAP.forEach((t, i) => {
|
||||
html += r.modules.map(m => cardHTML(m, 'u' + uidCounter++)).join('');
|
||||
html += '</div></div>';
|
||||
});
|
||||
html += `<div class="role-group"><div class="role-group__title"><span class="role-icon role-icon--shared">${ICONS.role.shared}</span>全角色共享</div><div class="module-grid module-grid--center">`;
|
||||
html += t.shared.map(m => cardHTML(m, 'u' + uidCounter++)).join('');
|
||||
html += '</div></div>';
|
||||
if (t.shared && t.shared.length > 0) {
|
||||
html += `<div class="role-group"><div class="role-group__title"><span class="role-icon role-icon--shared">${ICONS.role.shared}</span>全角色共享</div><div class="module-grid module-grid--center">`;
|
||||
html += t.shared.map(m => cardHTML(m, 'u' + uidCounter++)).join('');
|
||||
html += '</div></div>';
|
||||
}
|
||||
}
|
||||
div.innerHTML = html;
|
||||
tabContents.appendChild(div);
|
||||
|
||||
@@ -44,9 +44,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.breadcrumb__sep{color:var(--text-placeholder);}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
/* Tab表单样式 */
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.form-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 24px;flex-wrap:wrap;}
|
||||
.form-tab{padding:14px 16px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;display:flex;align-items:center;gap:5px;}
|
||||
.form-tab:hover{color:var(--primary);}
|
||||
.form-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.form-tab.done{color:var(--success);}
|
||||
.form-panel{display:none;padding:24px;}
|
||||
.form-panel.active{display:block;}
|
||||
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px;}
|
||||
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-group.full{grid-column:1/-1;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
@@ -58,7 +66,37 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.form-footer{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);}
|
||||
.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#73d13d;}
|
||||
.form-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-footer__left{display:flex;gap:8px;}
|
||||
.form-footer__right{display:flex;gap:8px;}
|
||||
/* 食材表格 */
|
||||
.ingredient-table{width:100%;border-collapse:collapse;font-size:var(--font-sm);margin-top:12px;}
|
||||
.ingredient-table th{background:#FAFAFA;padding:10px 12px;text-align:left;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
.ingredient-table td{padding:10px 12px;border-bottom:1px solid #F0F0F0;color:var(--text-primary);}
|
||||
.ingredient-table tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
/* 弹窗 */
|
||||
.dialog-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
|
||||
.dialog-mask.open{display:flex;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:560px;max-width:90vw;box-shadow:var(--shadow-md);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);}
|
||||
.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.dialog__body{padding:24px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.form-row .form-group{margin-bottom:16px;}
|
||||
.form-row .form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
/* 上传区域 */
|
||||
.upload-area{border:2px dashed var(--border);border-radius:var(--radius-md);padding:40px;text-align:center;color:var(--text-placeholder);cursor:pointer;transition:all .2s;}
|
||||
.upload-area:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.upload-area__icon{font-size:36px;margin-bottom:8px;}
|
||||
.upload-area__text{font-size:var(--font-sm);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -125,101 +163,195 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="din-dish-all.html">餐品总库</a>
|
||||
<span class="breadcrumb__sep">/</span>
|
||||
<span>新增餐品</span>
|
||||
</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">新增餐品</div>
|
||||
<div class="form-grid">
|
||||
<!-- 第1行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">餐品名称<span class="required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="请输入餐品名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">餐品分类</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>主食</option><option>荤菜</option><option>素菜</option><option>汤品</option><option>小吃</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 第2行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">餐品标签</label>
|
||||
<input class="form-input" type="text" placeholder="低脂/高蛋白/素食/三减等，逗号分隔">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">烹饪方法</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>炒</option><option>蒸</option><option>炖</option><option>煮</option><option>凉拌</option><option>炸</option><option>烤</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 第3行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">适用餐次</label>
|
||||
<input class="form-input" type="text" placeholder="早/午/晚，逗号分隔">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">过敏原</label>
|
||||
<input class="form-input" type="text" placeholder="如：含蛋类/含麸质，无则填无">
|
||||
</div>
|
||||
<!-- 第4行：食材清单（整行） -->
|
||||
<div class="form-group full">
|
||||
<label class="form-label">食材清单（食材名:用量g）</label>
|
||||
<textarea class="form-textarea" placeholder="如：猪五花肉:160, 生姜:5, 生抽:15"></textarea>
|
||||
</div>
|
||||
<!-- 第5行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">规格</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>小组(4份)</option><option>中组(8份)</option><option>大组(16份)</option><option>多人组(30份)</option><option>自定义</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">单位重量(g)<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入单位重量">
|
||||
</div>
|
||||
<!-- 第6行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">售价(元/份)<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入售价">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">热量(kcal/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入热量">
|
||||
</div>
|
||||
<!-- 第7行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">蛋白质(g/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入蛋白质含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">脂肪(g/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入脂肪含量">
|
||||
</div>
|
||||
<!-- 第8行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">碳水化合物(g/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入碳水化合物含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">钠(mg/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入钠含量">
|
||||
<!-- Tab导航 -->
|
||||
<div class="form-tabs" id="formTabs">
|
||||
<div class="form-tab active" onclick="switchTab(0)">🍽️ 基本档案</div>
|
||||
<div class="form-tab" onclick="switchTab(1)">🧩 餐品构成</div>
|
||||
<div class="form-tab" onclick="switchTab(2)">🍳 烹饪工艺</div>
|
||||
<div class="form-tab" onclick="switchTab(3)">📊 营养指标</div>
|
||||
<div class="form-tab" onclick="switchTab(4)">👅 味道档案</div>
|
||||
<div class="form-tab" onclick="switchTab(5)">🎨 色泽档案</div>
|
||||
<div class="form-tab" onclick="switchTab(6)">🫦 口感档案</div>
|
||||
<div class="form-tab" onclick="switchTab(7)">🖼️ 图片库</div>
|
||||
<div class="form-tab" onclick="switchTab(8)">🎬 视频库</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 0: 基本档案 -->
|
||||
<div class="form-panel active" id="panel0">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">餐品名称<span class="required">*</span></label><input class="form-input" type="text" placeholder="请输入餐品名称"></div>
|
||||
<div class="form-group"><label class="form-label">餐品分类<span class="required">*</span></label><select class="form-select"><option>请选择</option><option>主食</option><option>荤菜</option><option>素菜</option><option>汤品</option><option>小吃</option></select></div>
|
||||
<div class="form-group"><label class="form-label">规格</label><select class="form-select"><option>标准份</option><option>小份</option><option>大份</option></select></div>
|
||||
<div class="form-group"><label class="form-label">单位重量(g)<span class="required">*</span></label><input class="form-input" type="number" placeholder="请输入重量"></div>
|
||||
<div class="form-group"><label class="form-label">售价(元/份)<span class="required">*</span></label><input class="form-input" type="number" placeholder="请输入售价"></div>
|
||||
<div class="form-group"><label class="form-label">烹饪方法</label><select class="form-select"><option>请选择</option><option>炒</option><option>蒸</option><option>炖</option><option>煮</option><option>凉拌</option><option>炸</option><option>烤</option></select></div>
|
||||
<div class="form-group"><label class="form-label">适用餐次</label><input class="form-input" type="text" placeholder="早/午/晚"></div>
|
||||
<div class="form-group"><label class="form-label">过敏原</label><input class="form-input" type="text" placeholder="无则填无"></div>
|
||||
<div class="form-group"><label class="form-label">餐品标签</label><input class="form-input" type="text" placeholder="低脂/高蛋白/素食，逗号分隔"></div>
|
||||
<div class="form-group"><label class="form-label">上架状态</label><select class="form-select"><option>上架</option><option>下架</option></select></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 1: 餐品构成 -->
|
||||
<div class="form-panel" id="panel1">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
||||
<span style="font-size:var(--font-sm);font-weight:600;">食材清单</span>
|
||||
<button class="btn btn-primary" style="height:30px;font-size:var(--font-xs);" onclick="openIngredientDialog()">➕ 新增食材</button>
|
||||
</div>
|
||||
<table class="ingredient-table">
|
||||
<thead><tr><th>食材名称</th><th>食材分类</th><th>用量(g/份)</th><th>加工状态</th><th>是否主料</th><th>过敏原</th><th>备注</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td colspan="8" style="text-align:center;color:var(--text-placeholder);padding:32px;">暂无食材，请点击"新增食材"添加</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: 烹饪工艺 -->
|
||||
<div class="form-panel" id="panel2">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">主烹饪法<span class="required">*</span></label><select class="form-select"><option>请选择</option><option>炒</option><option>蒸</option><option>炖</option><option>煮</option><option>炸</option><option>烤</option><option>凉拌</option></select></div>
|
||||
<div class="form-group"><label class="form-label">辅烹饪法</label><select class="form-select"><option>无</option><option>煎</option><option>炒</option><option>蒸</option><option>炸</option></select></div>
|
||||
<div class="form-group"><label class="form-label">火候</label><input class="form-input" type="text" placeholder="如：大火→中火"></div>
|
||||
<div class="form-group"><label class="form-label">烹饪时长(min)</label><input class="form-input" type="number" placeholder="请输入时长"></div>
|
||||
<div class="form-group"><label class="form-label">油用量(g)</label><input class="form-input" type="number" placeholder="请输入油用量"></div>
|
||||
<div class="form-group"><label class="form-label">盐用量(g)</label><input class="form-input" type="number" placeholder="请输入盐用量"></div>
|
||||
<div class="form-group"><label class="form-label">烹饪温度(℃)</label><input class="form-input" type="text" placeholder="如：100→80"></div>
|
||||
<div class="form-group"><label class="form-label">出品量(g)</label><input class="form-input" type="number" placeholder="请输入出品量"></div>
|
||||
<div class="form-group"><label class="form-label">工艺步骤数</label><input class="form-input" type="number" placeholder="请输入步骤数"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: 营养指标 -->
|
||||
<div class="form-panel" id="panel3">
|
||||
<div class="form-grid-3">
|
||||
<div class="form-group"><label class="form-label">热量(kcal/份)</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">蛋白质(g)</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">脂肪(g)</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">碳水化合物(g)</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">钠(mg)</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">GI值</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">GI等级</label><select class="form-select"><option>请选择</option><option>低GI</option><option>中GI</option><option>高GI</option></select></div>
|
||||
<div class="form-group"><label class="form-label">GL值</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">SI值</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">ORAC值</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">嘌呤(mg/100g)</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">胆固醇(mg/份)</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">反式脂肪(g/份)</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
<div class="form-group"><label class="form-label">膳食宝塔分类</label><input class="form-input" type="text" placeholder="如：畜禽肉蛋水产"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 4: 味道档案 -->
|
||||
<div class="form-panel" id="panel4">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">主味型<span class="required">*</span></label><select class="form-select"><option>请选择</option><option>咸鲜</option><option>酸甜</option><option>淡味</option><option>酸鲜</option><option>麻辣</option><option>香辣</option></select></div>
|
||||
<div class="form-group"><label class="form-label">辅味型</label><select class="form-select"><option>无</option><option>微甜</option><option>清香</option><option>淡咸</option><option>咸鲜</option></select></div>
|
||||
<div class="form-group"><label class="form-label">味道强度</label><select class="form-select"><option>请选择</option><option>弱</option><option>中</option><option>强</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">味道描述</label><textarea class="form-textarea" placeholder="请描述味道特征"></textarea></div>
|
||||
<div class="form-group"><label class="form-label">适配人群</label><input class="form-input" type="text" placeholder="如：成人、老年人，逗号分隔"></div>
|
||||
<div class="form-group"><label class="form-label">适配等级</label><select class="form-select"><option>推荐</option><option>适量</option><option>慎食</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">饮食禁忌说明</label><input class="form-input" type="text" placeholder="如：糖尿病人群慎食"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 5: 色泽档案 -->
|
||||
<div class="form-panel" id="panel5">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">主色系<span class="required">*</span></label><input class="form-input" type="text" placeholder="如：红褐色"></div>
|
||||
<div class="form-group"><label class="form-label">感官评级</label><select class="form-select"><option>请选择</option><option>优</option><option>良</option><option>中</option><option>差</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">色泽描述</label><textarea class="form-textarea" placeholder="请描述色泽特征"></textarea></div>
|
||||
<div class="form-group full"><label class="form-label">色泽成因</label><input class="form-input" type="text" placeholder="如：酱油上色，焦糖化反应"></div>
|
||||
<div class="form-group"><label class="form-label">适配人群</label><input class="form-input" type="text" placeholder="如：成人、老年人"></div>
|
||||
<div class="form-group"><label class="form-label">适配等级</label><select class="form-select"><option>推荐</option><option>适量</option><option>慎食</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">备注</label><input class="form-input" type="text" placeholder="请输入备注"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 6: 口感档案 -->
|
||||
<div class="form-panel" id="panel6">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">主质地<span class="required">*</span></label><select class="form-select"><option>请选择</option><option>软烂</option><option>嫩脆</option><option>嫩滑</option><option>软糯</option><option>外酥内嫩</option></select></div>
|
||||
<div class="form-group"><label class="form-label">咀嚼难度</label><select class="form-select"><option>请选择</option><option>易</option><option>中</option><option>难</option></select></div>
|
||||
<div class="form-group"><label class="form-label">消化难度</label><select class="form-select"><option>请选择</option><option>易</option><option>中</option><option>难</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">口感描述</label><textarea class="form-textarea" placeholder="请描述口感特征"></textarea></div>
|
||||
<div class="form-group"><label class="form-label">适配人群</label><input class="form-input" type="text" placeholder="如：全人群、老年人"></div>
|
||||
<div class="form-group"><label class="form-label">适配等级</label><select class="form-select"><option>推荐</option><option>适量</option><option>慎食</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">烹饪建议</label><input class="form-input" type="text" placeholder="如：老年人可炒至更软"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 7: 图片库 -->
|
||||
<div class="form-panel" id="panel7">
|
||||
<div class="upload-area">
|
||||
<div class="upload-area__icon">📤</div>
|
||||
<div class="upload-area__text">点击或拖拽上传餐品图片<br><span style="font-size:var(--font-xs);color:var(--text-placeholder);">支持 JPG/PNG，单张不超过 5MB</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 8: 视频库 -->
|
||||
<div class="form-panel" id="panel8">
|
||||
<div class="upload-area">
|
||||
<div class="upload-area__icon">🎬</div>
|
||||
<div class="upload-area__text">点击或拖拽上传餐品视频<br><span style="font-size:var(--font-xs);color:var(--text-placeholder);">支持 MP4/MOV，单个不超过 500MB</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="form-footer">
|
||||
<a href="din-dish-all.html" class="btn btn-default">取消</a>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
<div class="form-footer__left">
|
||||
<a href="din-dish-all.html" class="btn btn-default">取消</a>
|
||||
</div>
|
||||
<div class="form-footer__right">
|
||||
<button class="btn btn-default" onclick="prevTab()">← 上一步</button>
|
||||
<button class="btn btn-primary" onclick="nextTab()">下一步 →</button>
|
||||
<button class="btn btn-success" onclick="submitForm()">✓ 提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增食材弹窗 -->
|
||||
<div class="dialog-mask" id="ingredientDialog">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增食材</div>
|
||||
<button class="dialog__close" onclick="closeIngredientDialog()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<div class="form-row"><div class="form-group"><label>食材名称<span class="required">*</span></label><input class="form-input" type="text" placeholder="请输入食材名称"></div><div class="form-group"><label>食材分类<span class="required">*</span></label><select class="form-select"><option>请选择</option><option>畜肉类</option><option>禽肉类</option><option>蛋类</option><option>蔬菜类</option><option>谷薯类</option><option>油脂类</option><option>调料</option></select></div></div>
|
||||
<div class="form-row"><div class="form-group"><label>用量(g/份)<span class="required">*</span></label><input class="form-input" type="number" placeholder="请输入用量"></div><div class="form-group"><label>加工状态</label><select class="form-select"><option>请选择</option><option>原料</option><option>净菜</option><option>半成品</option></select></div></div>
|
||||
<div class="form-row"><div class="form-group"><label>是否主料</label><select class="form-select"><option>辅料</option><option>主料</option></select></div><div class="form-group"><label>过敏原</label><input class="form-input" type="text" placeholder="无则填无"></div></div>
|
||||
<div class="form-row"><div class="form-group" style="grid-column:1/-1;"><label>备注</label><input class="form-input" type="text" placeholder="请输入备注信息"></div></div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="closeIngredientDialog()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentTab = 0;
|
||||
const totalTabs = 9;
|
||||
|
||||
function switchTab(idx){
|
||||
currentTab = idx;
|
||||
document.querySelectorAll('.form-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.form-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
}
|
||||
function nextTab(){ if(currentTab < totalTabs-1) switchTab(currentTab+1); }
|
||||
function prevTab(){ if(currentTab > 0) switchTab(currentTab-1); }
|
||||
function submitForm(){ alert('提交成功！'); window.location.href='din-dish-all.html'; }
|
||||
function openIngredientDialog(){document.getElementById('ingredientDialog').classList.add('open');}
|
||||
function closeIngredientDialog(){document.getElementById('ingredientDialog').classList.remove('open');}
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -31,7 +31,6 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
@@ -52,32 +51,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.stat-card__info{display:flex;flex-direction:column;gap:4px;}
|
||||
.stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);border-bottom:2px solid var(--border);}
|
||||
.page-tab{padding:14px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;display:flex;align-items:center;gap:6px;}
|
||||
.page-tab:hover{color:var(--primary);}
|
||||
.page-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.filter-bar{background:#fff;border-radius:0 0 var(--radius-md) var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:160px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);margin-right:4px;}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
@@ -85,11 +61,84 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
|
||||
/* 左右分栏布局 */
|
||||
.master-detail{display:flex;gap:16px;height:calc(100vh - 56px - 24px - 24px - 100px);}
|
||||
.panel-left{width:380px;flex-shrink:0;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.panel-right{flex:1;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.panel-left__header{padding:16px 20px 12px;border-bottom:1px solid var(--border);}
|
||||
.panel-left__title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
|
||||
.panel-left__search{display:flex;gap:8px;margin-bottom:10px;}
|
||||
.panel-left__search input{flex:1;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);outline:none;}
|
||||
.panel-left__search input:focus{border-color:var(--primary);}
|
||||
.panel-left__filter{display:flex;gap:8px;}
|
||||
.panel-left__filter select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 10px;font-size:var(--font-xs);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;cursor:pointer;flex:1;}
|
||||
.panel-left__actions{display:flex;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
|
||||
.panel-left__actions .btn{height:30px;font-size:var(--font-xs);padding:0 10px;}
|
||||
.food-list{flex:1;overflow-y:auto;padding:4px 0;}
|
||||
.food-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;}
|
||||
.food-item:hover{background:#F8FBFF;}
|
||||
.food-item.active{background:var(--primary-light);border-left-color:var(--primary);}
|
||||
.food-item__icon{width:36px;height:36px;border-radius:var(--radius-sm);background:#F5F7FA;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
|
||||
.food-item__info{flex:1;min-width:0;}
|
||||
.food-item__name{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.food-item__meta{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:2px;display:flex;gap:8px;}
|
||||
.panel-left__footer{padding:10px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
|
||||
.panel-left__footer span{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.page-btn{width:26px;height:26px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-xs);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 子表格展开样式 */
|
||||
|
||||
/* 右侧详情面板 */
|
||||
.panel-right__header{padding:16px 24px 0;border-bottom:1px solid var(--border);}
|
||||
.panel-right__food-title{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
|
||||
.panel-right__food-title h2{font-size:var(--font-lg);font-weight:600;}
|
||||
.panel-right__food-title .code{font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
.detail-tabs{display:flex;gap:0;flex-wrap:wrap;}
|
||||
.detail-tab{padding:10px 16px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;display:flex;align-items:center;gap:5px;}
|
||||
.detail-tab:hover{color:var(--primary);}
|
||||
.detail-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.panel-right__body{flex:1;overflow-y:auto;padding:20px 24px;}
|
||||
.detail-panel{display:none;}
|
||||
.detail-panel.active{display:block;}
|
||||
|
||||
/* 详情网格 */
|
||||
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
|
||||
.info-cell{background:#FAFBFC;border-radius:var(--radius-sm);padding:14px 16px;border:1px solid #F0F0F0;}
|
||||
.info-cell__label{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:4px;}
|
||||
.info-cell__value{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);}
|
||||
.info-section{margin-bottom:20px;}
|
||||
.info-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #F0F0F0;display:flex;align-items:center;justify-content:space-between;}
|
||||
.info-table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
.info-table th{background:#FAFAFA;padding:10px 12px;text-align:left;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
.info-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text-primary);}
|
||||
.info-table tr:last-child td{border-bottom:none;}
|
||||
.info-table tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 图片/视频网格 */
|
||||
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
|
||||
.media-card{background:#FAFBFC;border-radius:var(--radius-md);border:1px solid #F0F0F0;overflow:hidden;}
|
||||
.media-card__thumb{height:120px;background:#E8E8E8;display:flex;align-items:center;justify-content:center;font-size:36px;color:#999;}
|
||||
.media-card__info{padding:10px 12px;}
|
||||
.media-card__title{font-size:var(--font-sm);font-weight:500;margin-bottom:4px;}
|
||||
.media-card__meta{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
|
||||
/* 弹窗 */
|
||||
.dialog-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
|
||||
.dialog-mask.open{display:flex;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:560px;max-width:90vw;box-shadow:var(--shadow-md);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);}
|
||||
.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.dialog__body{padding:24px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-group{margin-bottom:16px;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
.form-group label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input,.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;}
|
||||
.form-input:focus,.form-select:focus{border-color:var(--primary);}
|
||||
.form-select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px;}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -115,7 +164,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：营养用餐 -->
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
@@ -158,480 +207,299 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🍽️</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">486</div><div class="stat-card__label">餐品总数</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">✅</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">312</div><div class="stat-card__label">上架中</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">📊</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">312道</div><div class="stat-card__label">已录入指标</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">🆕</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">18</div><div class="stat-card__label">本月新增</div></div>
|
||||
</div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🍽️</div><div class="stat-card__info"><div class="stat-card__value">486</div><div class="stat-card__label">餐品总数</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">✅</div><div class="stat-card__info"><div class="stat-card__value">312</div><div class="stat-card__label">上架中</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon orange">📊</div><div class="stat-card__info"><div class="stat-card__value">312道</div><div class="stat-card__label">已录入指标</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">🆕</div><div class="stat-card__info"><div class="stat-card__value">18</div><div class="stat-card__label">本月新增</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换栏 -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(0)">🍽️ 基本档案</div>
|
||||
<div class="page-tab" onclick="switchTab(1)">🍳 烹饪工艺</div>
|
||||
<div class="page-tab" onclick="switchTab(2)">📊 营养指标</div>
|
||||
<div class="page-tab" onclick="switchTab(3)">👅 味道档案</div>
|
||||
<div class="page-tab" onclick="switchTab(4)">🎨 色泽档案</div>
|
||||
<div class="page-tab" onclick="switchTab(5)">🫦 口感档案</div>
|
||||
<div class="page-tab" onclick="switchTab(6)">🖼️ 图片库</div>
|
||||
<div class="page-tab" onclick="switchTab(7)">🎬 视频库</div>
|
||||
</div>
|
||||
<!-- 左右分栏 -->
|
||||
<div class="master-detail">
|
||||
<!-- 左侧：餐品列表 -->
|
||||
<div class="panel-left">
|
||||
<div class="panel-left__header">
|
||||
<div class="panel-left__title">餐品列表</div>
|
||||
<div class="panel-left__search">
|
||||
<input type="text" placeholder="搜索餐品名称/编号...">
|
||||
<button class="btn btn-primary" style="height:32px;padding:0 12px;font-size:var(--font-xs);">搜索</button>
|
||||
</div>
|
||||
<div class="panel-left__filter">
|
||||
<select><option>全部分类</option><option>主食</option><option>荤菜</option><option>素菜</option><option>汤品</option><option>小吃</option></select>
|
||||
<select><option>全部状态</option><option>上架</option><option>下架</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-left__actions">
|
||||
<a href="din-dish-add.html" class="btn btn-primary">➕ 新增餐品</a>
|
||||
<button class="btn btn-default">🔄 同步营养检验数据</button>
|
||||
<button class="btn btn-default">📤 批量导入</button>
|
||||
</div>
|
||||
<div class="food-list" id="dishList"></div>
|
||||
<div class="panel-left__footer">
|
||||
<span>共 486 条</span>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 基本档案 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>餐品名称</label><input class="filter-input" placeholder="请输入餐品名称"></div>
|
||||
<div class="filter-item"><label>分类</label>
|
||||
<select class="filter-select"><option>全部</option><option>主食</option><option>荤菜</option><option>素菜</option><option>汤品</option><option>小吃</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>标签</label>
|
||||
<select class="filter-select"><option>全部</option><option>高蛋白</option><option>低脂</option><option>素食</option><option>低卡</option><option>主食</option><option>高糖</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>状态</label>
|
||||
<select class="filter-select"><option>全部</option><option>上架</option><option>下架</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<a href="din-dish-add.html" class="btn btn-primary">➕ 新增餐品</a>
|
||||
<button class="btn btn-default">🔄 同步营养检验数据</button>
|
||||
<button class="btn btn-default">📤 批量导入</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">基本档案</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>餐品编号</th><th>餐品名称</th><th>餐品分类</th><th>餐品标签</th><th>规格</th><th>单位重量(g)</th><th>售价(元/份)</th><th>烹饪方法</th><th>适用餐次</th><th>过敏原</th><th>热量(kcal/份)</th><th>蛋白质(g)</th><th>脂肪(g)</th><th>碳水(g)</th><th>钠(mg)</th><th>上架状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>DISH001</td><td>红烧肉</td><td>荤菜</td><td>高蛋白</td><td>标准份</td><td>200</td><td>¥12.0</td><td>炖</td><td>午/晚</td><td>无</td><td>385</td><td>18.2</td><td>28.6</td><td>12.4</td><td>486</td>
|
||||
<td><span class="tag tag-green">上架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH001">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DISH002</td><td>清炒时蔬</td><td>素菜</td><td>低脂/素食</td><td>标准份</td><td>150</td><td>¥6.0</td><td>炒</td><td>早/午/晚</td><td>无</td><td>68</td><td>2.1</td><td>3.2</td><td>8.6</td><td>186</td>
|
||||
<td><span class="tag tag-green">上架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH002">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DISH003</td><td>番茄鸡蛋汤</td><td>汤品</td><td>低卡</td><td>标准份</td><td>300</td><td>¥5.0</td><td>煮</td><td>午/晚</td><td>含蛋类</td><td>45</td><td>3.8</td><td>2.1</td><td>4.2</td><td>280</td>
|
||||
<td><span class="tag tag-green">上架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH003">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DISH004</td><td>米饭</td><td>主食</td><td>主食</td><td>标准份</td><td>200</td><td>¥3.0</td><td>蒸</td><td>早/午/晚</td><td>无</td><td>232</td><td>4.8</td><td>0.6</td><td>51.2</td><td>3</td>
|
||||
<td><span class="tag tag-green">上架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH004">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DISH005</td><td>糖醋里脊</td><td>荤菜</td><td>高糖</td><td>标准份</td><td>180</td><td>¥14.0</td><td>炸</td><td>午</td><td>无</td><td>420</td><td>22.4</td><td>18.6</td><td>38.2</td><td>620</td>
|
||||
<td><span class="tag tag-gray">下架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH005">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 烹饪工艺 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>餐品名称</label><input class="filter-input" placeholder="请输入餐品名称"></div>
|
||||
<div class="filter-item"><label>烹饪方法</label>
|
||||
<select class="filter-select"><option>全部</option><option>炒</option><option>蒸</option><option>炖</option><option>煮</option><option>炸</option><option>烤</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>火候</label>
|
||||
<select class="filter-select"><option>全部</option><option>大火</option><option>中火</option><option>小火</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新增工艺</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">烹饪工艺</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>餐品编号</th><th>餐品名称</th><th>主烹饪法</th><th>辅烹饪法</th><th>火候</th><th>烹饪时长(min)</th><th>油用量(g)</th><th>盐用量(g)</th><th>烹饪温度(℃)</th><th>标准份出品量(g)</th><th>工艺步骤数</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>炖</td><td>煎</td><td>中火→小火</td><td>45</td><td>15</td><td>3</td><td>100→80</td><td>200</td><td>6</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>炒</td><td>—</td><td>大火</td><td>5</td><td>8</td><td>2</td><td>200</td><td>150</td><td>4</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>煮</td><td>炒</td><td>中火</td><td>12</td><td>5</td><td>2</td><td>100</td><td>300</td><td>5</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>蒸</td><td>—</td><td>大火→中火</td><td>30</td><td>0</td><td>0</td><td>100</td><td>200</td><td>2</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>炸</td><td>炒</td><td>大火</td><td>15</td><td>50</td><td>1</td><td>180</td><td>180</td><td>7</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 营养指标 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>餐品名称</label><input class="filter-input" placeholder="请输入餐品名称"></div>
|
||||
<div class="filter-item"><label>GI等级</label>
|
||||
<select class="filter-select"><option>全部</option><option>低GI</option><option>中GI</option><option>高GI</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>嘌呤等级</label>
|
||||
<select class="filter-select"><option>全部</option><option>低嘌呤</option><option>中嘌呤</option><option>高嘌呤</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新增指标</button>
|
||||
<button class="btn btn-default">🔄 批量导入</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">营养指标</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>餐品编号</th><th>餐品名称</th><th>GI值</th><th>GI等级</th><th>GL值</th><th>SI值</th><th>ORAC值</th><th>嘌呤(mg/100g)</th><th>胆固醇(mg/份)</th><th>反式脂肪(g/份)</th><th>膳食宝塔分类</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>52</td><td><span class="tag tag-orange">中GI</span></td><td>18.6</td><td>68</td><td>420</td><td>120</td><td>86</td><td>0.2</td><td>畜禽肉蛋水产</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>15</td><td><span class="tag tag-green">低GI</span></td><td>2.1</td><td>142</td><td>2860</td><td>18</td><td>0</td><td>0</td><td>蔬菜</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>35</td><td><span class="tag tag-green">低GI</span></td><td>4.8</td><td>128</td><td>1240</td><td>42</td><td>186</td><td>0</td><td>蔬菜+蛋类</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>83</td><td><span class="tag tag-red">高GI</span></td><td>33.2</td><td>52</td><td>180</td><td>0</td><td>0</td><td>0</td><td>谷薯杂豆</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>68</td><td><span class="tag tag-orange">中GI</span></td><td>28.4</td><td>45</td><td>380</td><td>98</td><td>72</td><td>0.8</td><td>畜禽肉蛋水产</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 312 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 味道档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>餐品名称</label><input class="filter-input" placeholder="请输入餐品名称"></div>
|
||||
<div class="filter-item"><label>主味型</label>
|
||||
<select class="filter-select"><option>全部</option><option>淡味</option><option>鲜味</option><option>咸鲜</option><option>酸鲜</option><option>酸甜</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配人群</label>
|
||||
<select class="filter-select"><option>全部</option><option>全人群</option><option>成人</option><option>老年人</option><option>儿童</option><option>糖尿病人群</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配等级</label>
|
||||
<select class="filter-select"><option>全部</option><option>推荐</option><option>适量</option><option>慎食</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新增味道档案</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">味道档案</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>餐品编号</th><th>餐品名称</th><th>主味型</th><th>辅味型</th><th>味道强度</th><th>味道描述</th><th>适配人群</th><th>适配等级</th><th>饮食禁忌说明</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>咸鲜</td><td>微甜</td><td>强</td><td>酱香浓郁，咸甜适中，肉香四溢</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>老年人控制摄入量，钠含量偏高</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>淡味</td><td>清香</td><td>弱</td><td>清淡爽口，蔬菜本味，微有蒜香</td>
|
||||
<td><span class="tag tag-green">全人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>酸鲜</td><td>淡咸</td><td>中</td><td>酸甜开胃，汤鲜味美，口感清爽</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>淡味</td><td>微甜</td><td>弱</td><td>清淡微甜，米香自然，无刺激性</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-orange">糖尿病人群</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>糖尿病人群控制摄入量</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>酸甜</td><td>咸鲜</td><td>强</td><td>酸甜浓郁，外酥里嫩，口感丰富</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">儿童</span><span class="tag tag-red">糖尿病人群</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>糖尿病人群慎食，含糖量高</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab5: 色泽档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>餐品名称</label><input class="filter-input" placeholder="请输入餐品名称"></div>
|
||||
<div class="filter-item"><label>主色系</label>
|
||||
<select class="filter-select"><option>全部</option><option>红褐色</option><option>翠绿色</option><option>橙红色</option><option>乳白色</option><option>金黄色</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>感官评级</label>
|
||||
<select class="filter-select"><option>全部</option><option>优</option><option>良</option><option>中</option><option>差</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配人群</label>
|
||||
<select class="filter-select"><option>全部</option><option>全人群</option><option>成人</option><option>老年人</option><option>儿童</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新增色泽档案</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">色泽档案</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>餐品编号</th><th>餐品名称</th><th>主色系</th><th>色泽描述</th><th>色泽成因</th><th>感官评级</th><th>适配人群</th><th>适配等级</th><th>备注</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>红褐色</td><td>色泽红亮，油润光泽，肉质饱满</td><td>酱油上色，焦糖化反应</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>老年人消化负担稍重</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>翠绿色</td><td>翠绿鲜亮，色泽均匀，叶片完整</td><td>叶绿素保留，大火快炒</td><td>优</td>
|
||||
<td><span class="tag tag-green">全人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>橙红色</td><td>汤色橙红，蛋花嫩黄，色彩鲜艳</td><td>番茄红素，蛋黄色素</td><td>优</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>乳白色</td><td>洁白晶莹，颗粒饱满，有光泽</td><td>淀粉糊化，水分均匀</td><td>优</td>
|
||||
<td><span class="tag tag-green">全人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>金黄色</td><td>外皮金黄酥脆，色泽均匀，油亮</td><td>高温油炸，美拉德反应</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span><span class="tag tag-orange">儿童</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>油炸食品，老年人儿童适量</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab6: 口感档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>餐品名称</label><input class="filter-input" placeholder="请输入餐品名称"></div>
|
||||
<div class="filter-item"><label>主质地</label>
|
||||
<select class="filter-select"><option>全部</option><option>软烂</option><option>嫩脆</option><option>嫩滑</option><option>软糯</option><option>外酥内嫩</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>咀嚼难度</label>
|
||||
<select class="filter-select"><option>全部</option><option>易</option><option>中</option><option>难</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配人群</label>
|
||||
<select class="filter-select"><option>全部</option><option>全人群</option><option>成人</option><option>老年人</option><option>儿童</option><option>婴幼儿</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新增口感档案</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">口感档案</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>餐品编号</th><th>餐品名称</th><th>主质地</th><th>咀嚼难度</th><th>消化难度</th><th>口感描述</th><th>适配人群</th><th>适配等级</th><th>烹饪建议</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>软烂</td><td>易</td><td>中</td><td>肥而不腻，入口即化，胶质丰富</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">老年人</span><span class="tag tag-orange">儿童</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>儿童控制脂肪摄入</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>嫩脆</td><td>易</td><td>易</td><td>清脆爽口，纤维感适中，汁水丰富</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-orange">老年人</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>老年人可炒至更软</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>嫩滑</td><td>易</td><td>易</td><td>汤汁鲜美，蛋花嫩滑，易于消化</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">婴幼儿</span><span class="tag tag-green">术后恢复</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>软糯</td><td>易</td><td>易</td><td>颗粒分明，软糯适中，不粘不散</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">老年人</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>老年人可煮软一些</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>外酥内嫩</td><td>中</td><td>中</td><td>外皮酥脆，内里嫩滑，层次丰富</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span><span class="tag tag-red">婴幼儿</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>婴幼儿不宜，油炸食品</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab7: 图片库 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>餐品名称</label><input class="filter-input" placeholder="请输入餐品名称"></div>
|
||||
<div class="filter-item"><label>图片类型</label>
|
||||
<select class="filter-select"><option>全部</option><option>主图</option><option>摆盘图</option><option>制作过程</option><option>食材展示</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>上传日期</label><input class="filter-input" type="date"></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">📤 上传图片</button>
|
||||
<button class="btn btn-default">🗑️ 批量删除</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">图片库</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>图片ID</th><th>餐品编号</th><th>餐品名称</th><th>图片类型</th><th>图片描述</th><th>分辨率</th><th>文件大小</th><th>排序</th><th>上传人</th><th>上传时间</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>IMG-001</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-green">主图</span></td><td>正面展示图</td><td>800×600</td><td>128KB</td><td>1</td><td>张厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>IMG-002</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-blue">摆盘图</span></td><td>精美摆盘展示</td><td>1200×900</td><td>256KB</td><td>2</td><td>张厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>IMG-003</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-gray">制作过程</span></td><td>炖制过程</td><td>800×600</td><td>96KB</td><td>3</td><td>张厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>IMG-004</td><td>DISH002</td><td>清炒时蔬</td><td><span class="tag tag-green">主图</span></td><td>正面展示图</td><td>800×600</td><td>112KB</td><td>1</td><td>李厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>IMG-005</td><td>DISH003</td><td>番茄鸡蛋汤</td><td><span class="tag tag-green">主图</span></td><td>正面展示图</td><td>800×600</td><td>108KB</td><td>1</td><td>王厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 86 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab8: 视频库 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>餐品名称</label><input class="filter-input" placeholder="请输入餐品名称"></div>
|
||||
<div class="filter-item"><label>视频类型</label>
|
||||
<select class="filter-select"><option>全部</option><option>烹饪教程</option><option>宣传视频</option><option>营养科普</option><option>食材溯源</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>上传日期</label><input class="filter-input" type="date"></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">📤 上传视频</button>
|
||||
<button class="btn btn-default">🗑️ 批量删除</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">视频库</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>视频ID</th><th>餐品编号</th><th>餐品名称</th><th>视频类型</th><th>视频标题</th><th>时长</th><th>文件大小</th><th>播放量</th><th>上传人</th><th>上传时间</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>VID-001</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-green">烹饪教程</span></td><td>红烧肉标准制作流程</td><td>8分32秒</td><td>256MB</td><td>3,286</td><td>张厨师</td><td>2026-04-10</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>VID-002</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-blue">宣传视频</span></td><td>红烧肉食材溯源故事</td><td>2分15秒</td><td>86MB</td><td>1,842</td><td>运营组</td><td>2026-04-12</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>VID-003</td><td>DISH002</td><td>清炒时蔬</td><td><span class="tag tag-green">烹饪教程</span></td><td>清炒时蔬大火快炒技巧</td><td>4分18秒</td><td>128MB</td><td>2,156</td><td>李厨师</td><td>2026-04-10</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>VID-004</td><td>DISH003</td><td>番茄鸡蛋汤</td><td><span class="tag tag-green">烹饪教程</span></td><td>番茄鸡蛋汤营养搭配讲解</td><td>5分42秒</td><td>168MB</td><td>4,320</td><td>营养师</td><td>2026-04-11</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>VID-005</td><td>DISH004</td><td>米饭</td><td><span class="tag tag-gray">营养科普</span></td><td>米饭GI值与血糖管理</td><td>3分28秒</td><td>96MB</td><td>5,680</td><td>营养师</td><td>2026-04-13</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 42 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<!-- 右侧：餐品详情 -->
|
||||
<div class="panel-right">
|
||||
<div class="panel-right__header">
|
||||
<div class="panel-right__food-title">
|
||||
<h2 id="detailName">红烧肉</h2>
|
||||
<span class="code" id="detailCode">DISH001</span>
|
||||
<span class="tag tag-green" id="detailStatus">上架</span>
|
||||
</div>
|
||||
<div class="detail-tabs">
|
||||
<div class="detail-tab active" onclick="switchDetailTab(0)">🍽️ 基本档案</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(1)">🧩 餐品构成</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(2)">🍳 烹饪工艺</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(3)">📊 营养指标</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(4)">👅 味道档案</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(5)">🎨 色泽档案</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(6)">🫦 口感档案</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(7)">🖼️ 图片库</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(8)">🎬 视频库</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-right__body" id="detailBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
// 餐品数据
|
||||
const DISHES = [
|
||||
{id:'DISH001',name:'红烧肉',icon:'🥩',category:'荤菜',tags:['高蛋白'],spec:'标准份',weight:200,price:12,method:'炖',meal:'午/晚',allergen:'无',status:'上架',
|
||||
composition:[{name:'猪五花肉',cat:'畜肉类',amount:160,pct:'80%',state:'净菜',main:true,allergen:'无',note:'—'},{name:'生姜',cat:'调料',amount:5,pct:'2.5%',state:'净菜',main:false,allergen:'无',note:'—'},{name:'生抽',cat:'调料',amount:15,pct:'7.5%',state:'原料',main:false,allergen:'含麸质',note:'酱油'},{name:'冰糖',cat:'调料',amount:10,pct:'5%',state:'原料',main:false,allergen:'无',note:'上色提味'},{name:'料酒',cat:'调料',amount:10,pct:'5%',state:'原料',main:false,allergen:'无',note:'去腥'}],
|
||||
nutri:{calorie:385,protein:18.2,fat:28.6,carb:12.4,sodium:486,gi:52,giLevel:'中GI',gl:18.6,si:68,orac:420,purine:120,cholesterol:86,transFat:0.2,pyramid:'畜禽肉蛋水产'},
|
||||
cook:{mainMethod:'炖',subMethod:'煎',heat:'中火→小火',duration:45,oil:15,salt:3,temp:'100→80',output:200,steps:6},
|
||||
taste:{mainFlavor:'咸鲜',subFlavor:'微甜',intensity:'强',desc:'酱香浓郁，咸甜适中，肉香四溢',crowd:['成人','老年人'],level:'适量',taboo:'老年人控制摄入量，钠含量偏高'},
|
||||
color:{mainColor:'红褐色',desc:'色泽红亮，油润光泽，肉质饱满',cause:'酱油上色，焦糖化反应',grade:'优',crowd:['成人','老年人'],level:'适量',note:'老年人消化负担稍重'},
|
||||
texture:{mainTexture:'软烂',chew:'易',digest:'中',desc:'肥而不腻，入口即化，胶质丰富',crowd:['成人','老年人','儿童'],level:'适量',suggest:'儿童控制脂肪摄入'}
|
||||
},
|
||||
{id:'DISH002',name:'清炒时蔬',icon:'🥬',category:'素菜',tags:['低脂','素食'],spec:'标准份',weight:150,price:6,method:'炒',meal:'早/午/晚',allergen:'无',status:'上架',
|
||||
composition:[{name:'时令青菜',cat:'蔬菜类',amount:120,pct:'80%',state:'净菜',main:true,allergen:'无',note:'—'},{name:'蒜末',cat:'调料',amount:5,pct:'3.3%',state:'净菜',main:false,allergen:'无',note:'—'},{name:'食用油',cat:'油脂类',amount:8,pct:'5.3%',state:'原料',main:false,allergen:'无',note:'—'},{name:'食盐',cat:'调料',amount:2,pct:'1.3%',state:'原料',main:false,allergen:'无',note:'—'}],
|
||||
nutri:{calorie:68,protein:2.1,fat:3.2,carb:8.6,sodium:186,gi:15,giLevel:'低GI',gl:2.1,si:142,orac:2860,purine:18,cholesterol:0,transFat:0,pyramid:'蔬菜'},
|
||||
cook:{mainMethod:'炒',subMethod:'—',heat:'大火',duration:5,oil:8,salt:2,temp:'200',output:150,steps:4},
|
||||
taste:{mainFlavor:'淡味',subFlavor:'清香',intensity:'弱',desc:'清淡爽口，蔬菜本味，微有蒜香',crowd:['全人群'],level:'推荐',taboo:'—'},
|
||||
color:{mainColor:'翠绿色',desc:'翠绿鲜亮，色泽均匀，叶片完整',cause:'叶绿素保留，大火快炒',grade:'优',crowd:['全人群'],level:'推荐',note:'—'},
|
||||
texture:{mainTexture:'嫩脆',chew:'易',digest:'易',desc:'清脆爽口，纤维感适中，汁水丰富',crowd:['全人群','老年人'],level:'推荐',suggest:'老年人可炒至更软'}
|
||||
},
|
||||
{id:'DISH003',name:'番茄鸡蛋汤',icon:'🍅',category:'汤品',tags:['低卡'],spec:'标准份',weight:300,price:5,method:'煮',meal:'午/晚',allergen:'含蛋类',status:'上架',
|
||||
composition:[{name:'番茄',cat:'蔬菜类',amount:150,pct:'50%',state:'净菜',main:true,allergen:'无',note:'—'},{name:'鸡蛋',cat:'蛋类',amount:60,pct:'20%',state:'原料',main:true,allergen:'含蛋类',note:'—'},{name:'食用油',cat:'油脂类',amount:5,pct:'1.7%',state:'原料',main:false,allergen:'无',note:'—'},{name:'食盐',cat:'调料',amount:2,pct:'0.7%',state:'原料',main:false,allergen:'无',note:'—'}],
|
||||
nutri:{calorie:45,protein:3.8,fat:2.1,carb:4.2,sodium:280,gi:35,giLevel:'低GI',gl:4.8,si:128,orac:1240,purine:42,cholesterol:186,transFat:0,pyramid:'蔬菜+蛋类'},
|
||||
cook:{mainMethod:'煮',subMethod:'炒',heat:'中火',duration:12,oil:5,salt:2,temp:'100',output:300,steps:5},
|
||||
taste:{mainFlavor:'酸鲜',subFlavor:'淡咸',intensity:'中',desc:'酸甜开胃，汤鲜味美，口感清爽',crowd:['全人群','儿童'],level:'推荐',taboo:'—'},
|
||||
color:{mainColor:'橙红色',desc:'汤色橙红，蛋花嫩黄，色彩鲜艳',cause:'番茄红素，蛋黄色素',grade:'优',crowd:['全人群','儿童'],level:'推荐',note:'—'},
|
||||
texture:{mainTexture:'嫩滑',chew:'易',digest:'易',desc:'汤汁鲜美，蛋花嫩滑，易于消化',crowd:['全人群','婴幼儿','术后恢复'],level:'推荐',suggest:'—'}
|
||||
},
|
||||
{id:'DISH004',name:'米饭',icon:'🍚',category:'主食',tags:['主食'],spec:'标准份',weight:200,price:3,method:'蒸',meal:'早/午/晚',allergen:'无',status:'上架',
|
||||
composition:[{name:'大米',cat:'谷薯类',amount:100,pct:'100%',state:'原料',main:true,allergen:'无',note:'—'}],
|
||||
nutri:{calorie:232,protein:4.8,fat:0.6,carb:51.2,sodium:3,gi:83,giLevel:'高GI',gl:33.2,si:52,orac:180,purine:0,cholesterol:0,transFat:0,pyramid:'谷薯杂豆'},
|
||||
cook:{mainMethod:'蒸',subMethod:'—',heat:'大火→中火',duration:30,oil:0,salt:0,temp:'100',output:200,steps:2},
|
||||
taste:{mainFlavor:'淡味',subFlavor:'微甜',intensity:'弱',desc:'清淡微甜，米香自然，无刺激性',crowd:['全人群','糖尿病人群'],level:'适量',taboo:'糖尿病人群控制摄入量'},
|
||||
color:{mainColor:'乳白色',desc:'洁白晶莹，颗粒饱满，有光泽',cause:'淀粉糊化，水分均匀',grade:'优',crowd:['全人群'],level:'推荐',note:'—'},
|
||||
texture:{mainTexture:'软糯',chew:'易',digest:'易',desc:'颗粒分明，软糯适中，不粘不散',crowd:['全人群','老年人'],level:'推荐',suggest:'老年人可煮软一些'}
|
||||
},
|
||||
{id:'DISH005',name:'糖醋里脊',icon:'🍖',category:'荤菜',tags:['高糖'],spec:'标准份',weight:180,price:14,method:'炸',meal:'午',allergen:'无',status:'下架',
|
||||
composition:[{name:'猪里脊肉',cat:'畜肉类',amount:120,pct:'66.7%',state:'净菜',main:true,allergen:'无',note:'—'},{name:'淀粉',cat:'谷薯类',amount:20,pct:'11.1%',state:'原料',main:false,allergen:'无',note:'挂糊'},{name:'白糖',cat:'调料',amount:25,pct:'13.9%',state:'原料',main:false,allergen:'无',note:'糖醋汁'},{name:'食醋',cat:'调料',amount:15,pct:'8.3%',state:'原料',main:false,allergen:'无',note:'糖醋汁'}],
|
||||
nutri:{calorie:420,protein:22.4,fat:18.6,carb:38.2,sodium:620,gi:68,giLevel:'中GI',gl:28.4,si:45,orac:380,purine:98,cholesterol:72,transFat:0.8,pyramid:'畜禽肉蛋水产'},
|
||||
cook:{mainMethod:'炸',subMethod:'炒',heat:'大火',duration:15,oil:50,salt:1,temp:'180',output:180,steps:7},
|
||||
taste:{mainFlavor:'酸甜',subFlavor:'咸鲜',intensity:'强',desc:'酸甜浓郁，外酥里嫩，口感丰富',crowd:['成人','儿童','糖尿病人群'],level:'慎食',taboo:'糖尿病人群慎食，含糖量高'},
|
||||
color:{mainColor:'金黄色',desc:'外皮金黄酥脆，色泽均匀，油亮',cause:'高温油炸，美拉德反应',grade:'优',crowd:['成人','老年人','儿童'],level:'适量',note:'油炸食品，老年人儿童适量'},
|
||||
texture:{mainTexture:'外酥内嫩',chew:'中',digest:'中',desc:'外皮酥脆，内里嫩滑，层次丰富',crowd:['成人','老年人','婴幼儿'],level:'慎食',suggest:'婴幼儿不宜，油炸食品'}
|
||||
}
|
||||
];
|
||||
|
||||
let currentDish = 0;
|
||||
let currentTab = 0;
|
||||
|
||||
function renderDishList(){
|
||||
document.getElementById('dishList').innerHTML = DISHES.map((d,i)=>`
|
||||
<div class="food-item${i===currentDish?' active':''}" onclick="selectDish(${i})">
|
||||
<div class="food-item__icon">${d.icon}</div>
|
||||
<div class="food-item__info">
|
||||
<div class="food-item__name">${d.name}</div>
|
||||
<div class="food-item__meta"><span>${d.id}</span><span>${d.category}</span><span class="tag tag-${d.status==='上架'?'green':'gray'}" style="margin:0;padding:1px 6px;">${d.status}</span></div>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
}
|
||||
// 侧边栏子组展开/收起
|
||||
|
||||
function selectDish(idx){ currentDish=idx; renderDishList(); renderDetail(); }
|
||||
function switchDetailTab(idx){ currentTab=idx; document.querySelectorAll('.detail-tab').forEach((t,i)=>t.classList.toggle('active',i===idx)); renderDetail(); }
|
||||
|
||||
function renderDetail(){
|
||||
const d = DISHES[currentDish];
|
||||
document.getElementById('detailName').textContent = d.name;
|
||||
document.getElementById('detailCode').textContent = d.id;
|
||||
const s = document.getElementById('detailStatus');
|
||||
s.textContent = d.status; s.className='tag tag-'+(d.status==='上架'?'green':'gray');
|
||||
const body = document.getElementById('detailBody');
|
||||
const renderers = [renderBasic,renderComposition,renderCook,renderNutri,renderTaste,renderColor,renderTexture,renderImages,renderVideos];
|
||||
body.innerHTML = renderers[currentTab](d);
|
||||
}
|
||||
|
||||
function renderBasic(d){
|
||||
return `<div class="info-section"><div class="info-section__title">基本信息 <span><span class="link">编辑</span></span></div>
|
||||
<div class="info-grid">
|
||||
<div class="info-cell"><div class="info-cell__label">餐品编号</div><div class="info-cell__value">${d.id}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">餐品分类</div><div class="info-cell__value">${d.category}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">规格</div><div class="info-cell__value">${d.spec}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">单位重量</div><div class="info-cell__value">${d.weight}g</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">售价</div><div class="info-cell__value">¥${d.price.toFixed(1)}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">烹饪方法</div><div class="info-cell__value">${d.method}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">适用餐次</div><div class="info-cell__value">${d.meal}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">过敏原</div><div class="info-cell__value">${d.allergen}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">餐品标签</div><div class="info-cell__value">${d.tags.map(t=>'<span class="tag tag-blue">'+t+'</span>').join('')}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">上架状态</div><div class="info-cell__value"><span class="tag tag-${d.status==='上架'?'green':'gray'}">${d.status}</span></div></div>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
function renderComposition(d){
|
||||
const rows = (d.composition||[]).map(c=>`<tr><td>${c.name}</td><td>${c.cat}</td><td>${c.amount}</td><td>${c.pct}</td><td>${c.state}</td><td><span class="tag tag-${c.main?'green':'gray'}">${c.main?'主料':'辅料'}</span></td><td>${c.allergen}</td><td>${c.note}</td><td><span class="link">编辑</span></td></tr>`).join('');
|
||||
return `<div class="info-section"><div class="info-section__title">食材构成（共 ${(d.composition||[]).length} 项） <span><button class="btn btn-primary" style="height:28px;font-size:var(--font-xs);padding:0 10px;" onclick="openIngredientDialog()">➕ 新增食材</button></div>
|
||||
<table class="info-table"><thead><tr><th>食材名称</th><th>食材分类</th><th>用量(g/份)</th><th>占比(%)</th><th>加工状态</th><th>是否主料</th><th>过敏原</th><th>备注</th><th>操作</th></tr></thead><tbody>${rows}</tbody></table></div>`;
|
||||
}
|
||||
|
||||
function renderCook(d){
|
||||
const c = d.cook;
|
||||
return `<div class="info-section"><div class="info-section__title">烹饪工艺 <span><span class="link">编辑</span></span></div>
|
||||
<div class="info-grid">
|
||||
<div class="info-cell"><div class="info-cell__label">主烹饪法</div><div class="info-cell__value">${c.mainMethod}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">辅烹饪法</div><div class="info-cell__value">${c.subMethod}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">火候</div><div class="info-cell__value">${c.heat}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">烹饪时长</div><div class="info-cell__value">${c.duration}min</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">油用量</div><div class="info-cell__value">${c.oil}g</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">盐用量</div><div class="info-cell__value">${c.salt}g</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">烹饪温度</div><div class="info-cell__value">${c.temp}℃</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">出品量</div><div class="info-cell__value">${c.output}g</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">工艺步骤数</div><div class="info-cell__value">${c.steps}步</div></div>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
function renderNutri(d){
|
||||
const n = d.nutri;
|
||||
return `<div class="info-section"><div class="info-section__title">营养指标 <span><span class="link">编辑</span></span></div>
|
||||
<div class="info-grid">
|
||||
<div class="info-cell"><div class="info-cell__label">热量</div><div class="info-cell__value">${n.calorie} kcal/份</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">蛋白质</div><div class="info-cell__value">${n.protein}g</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">脂肪</div><div class="info-cell__value">${n.fat}g</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">碳水化合物</div><div class="info-cell__value">${n.carb}g</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">钠</div><div class="info-cell__value">${n.sodium}mg</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">GI值</div><div class="info-cell__value">${n.gi} <span class="tag tag-${n.giLevel==='低GI'?'green':n.giLevel==='中GI'?'orange':'red'}">${n.giLevel}</span></div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">GL值</div><div class="info-cell__value">${n.gl}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">SI值</div><div class="info-cell__value">${n.si}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">ORAC值</div><div class="info-cell__value">${n.orac}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">嘌呤</div><div class="info-cell__value">${n.purine}mg/100g</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">胆固醇</div><div class="info-cell__value">${n.cholesterol}mg/份</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">反式脂肪</div><div class="info-cell__value">${n.transFat}g/份</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">膳食宝塔分类</div><div class="info-cell__value">${n.pyramid}</div></div>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
function renderTaste(d){
|
||||
const t = d.taste;
|
||||
return `<div class="info-section"><div class="info-section__title">味道档案 <span><span class="link">编辑</span></span></div>
|
||||
<div class="info-grid">
|
||||
<div class="info-cell"><div class="info-cell__label">主味型</div><div class="info-cell__value">${t.mainFlavor}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">辅味型</div><div class="info-cell__value">${t.subFlavor}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">味道强度</div><div class="info-cell__value">${t.intensity}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">味道描述</div><div class="info-cell__value">${t.desc}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">适配人群</div><div class="info-cell__value">${t.crowd.map(c=>'<span class="tag tag-green">'+c+'</span>').join('')}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">适配等级</div><div class="info-cell__value"><span class="tag tag-${t.level==='推荐'?'green':t.level==='适量'?'orange':'red'}">${t.level}</span></div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">饮食禁忌说明</div><div class="info-cell__value">${t.taboo}</div></div>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
function renderColor(d){
|
||||
const c = d.color;
|
||||
return `<div class="info-section"><div class="info-section__title">色泽档案 <span><span class="link">编辑</span></span></div>
|
||||
<div class="info-grid">
|
||||
<div class="info-cell"><div class="info-cell__label">主色系</div><div class="info-cell__value">${c.mainColor}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">色泽描述</div><div class="info-cell__value">${c.desc}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">色泽成因</div><div class="info-cell__value">${c.cause}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">感官评级</div><div class="info-cell__value">${c.grade}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">适配人群</div><div class="info-cell__value">${c.crowd.map(x=>'<span class="tag tag-green">'+x+'</span>').join('')}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">适配等级</div><div class="info-cell__value"><span class="tag tag-${c.level==='推荐'?'green':c.level==='适量'?'orange':'red'}">${c.level}</span></div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">备注</div><div class="info-cell__value">${c.note}</div></div>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
function renderTexture(d){
|
||||
const t = d.texture;
|
||||
return `<div class="info-section"><div class="info-section__title">口感档案 <span><span class="link">编辑</span></span></div>
|
||||
<div class="info-grid">
|
||||
<div class="info-cell"><div class="info-cell__label">主质地</div><div class="info-cell__value">${t.mainTexture}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">咀嚼难度</div><div class="info-cell__value">${t.chew}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">消化难度</div><div class="info-cell__value">${t.digest}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">口感描述</div><div class="info-cell__value">${t.desc}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">适配人群</div><div class="info-cell__value">${t.crowd.map(x=>'<span class="tag tag-green">'+x+'</span>').join('')}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">适配等级</div><div class="info-cell__value"><span class="tag tag-${t.level==='推荐'?'green':t.level==='适量'?'orange':'red'}">${t.level}</span></div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">烹饪建议</div><div class="info-cell__value">${t.suggest}</div></div>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
function renderImages(d){
|
||||
return `<div class="info-section"><div class="info-section__title">图片库 <span><button class="btn btn-primary" style="height:28px;font-size:var(--font-xs);padding:0 10px;">📤 上传图片</button></span></div>
|
||||
<div class="media-grid">
|
||||
<div class="media-card"><div class="media-card__thumb">📷</div><div class="media-card__info"><div class="media-card__title">主图 - 正面展示</div><div class="media-card__meta">800×600 · 128KB · <span class="link">预览</span></div></div></div>
|
||||
<div class="media-card"><div class="media-card__thumb">📷</div><div class="media-card__info"><div class="media-card__title">摆盘图 - 精美展示</div><div class="media-card__meta">1200×900 · 256KB · <span class="link">预览</span></div></div></div>
|
||||
<div class="media-card"><div class="media-card__thumb">📷</div><div class="media-card__info"><div class="media-card__title">制作过程</div><div class="media-card__meta">800×600 · 96KB · <span class="link">预览</span></div></div></div>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
function renderVideos(d){
|
||||
return `<div class="info-section"><div class="info-section__title">视频库 <span><button class="btn btn-primary" style="height:28px;font-size:var(--font-xs);padding:0 10px;">📤 上传视频</button></span></div>
|
||||
<div class="media-grid">
|
||||
<div class="media-card"><div class="media-card__thumb">🎬</div><div class="media-card__info"><div class="media-card__title">标准制作流程</div><div class="media-card__meta">8分32秒 · 256MB · <span class="link">播放</span></div></div></div>
|
||||
<div class="media-card"><div class="media-card__thumb">🎬</div><div class="media-card__info"><div class="media-card__title">食材溯源故事</div><div class="media-card__meta">2分15秒 · 86MB · <span class="link">播放</span></div></div></div>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
// 侧边栏折叠
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
// 初始化
|
||||
renderDishList();
|
||||
renderDetail();
|
||||
</script>
|
||||
|
||||
<!-- 新增食材弹窗 -->
|
||||
<div class="dialog-mask" id="ingredientDialog">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增食材</div>
|
||||
<button class="dialog__close" onclick="closeIngredientDialog()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>食材名称<span class="required">*</span></label><input class="form-input" type="text" placeholder="请输入食材名称"></div>
|
||||
<div class="form-group"><label>食材分类<span class="required">*</span></label><select class="form-select"><option>请选择</option><option>畜肉类</option><option>禽肉类</option><option>蛋类</option><option>蔬菜类</option><option>谷薯类</option><option>油脂类</option><option>调料</option></select></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>用量(g/份)<span class="required">*</span></label><input class="form-input" type="number" placeholder="请输入用量"></div>
|
||||
<div class="form-group"><label>加工状态</label><select class="form-select"><option>请选择</option><option>原料</option><option>净菜</option><option>半成品</option></select></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>是否主料</label><select class="form-select"><option>辅料</option><option>主料</option></select></div>
|
||||
<div class="form-group"><label>过敏原</label><input class="form-input" type="text" placeholder="无则填无"></div>
|
||||
</div>
|
||||
<div class="form-group"><label>备注</label><input class="form-input" type="text" placeholder="请输入备注信息"></div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="closeIngredientDialog()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openIngredientDialog(){document.getElementById('ingredientDialog').classList.add('open');}
|
||||
function closeIngredientDialog(){document.getElementById('ingredientDialog').classList.remove('open');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,254 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 餐品构成 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.breadcrumb__sep{color:var(--text-placeholder);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
th,td{padding:12px 16px;text-align:left;font-size:var(--font-sm);border-bottom:1px solid #F0F0F0;}
|
||||
th{background:#FAFAFA;color:var(--text-secondary);font-weight:500;}
|
||||
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);font-weight:500;}
|
||||
.tag-green{background:#F6FFED;color:#52C41A;}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px 24px;margin-bottom:16px;display:flex;gap:32px;flex-wrap:wrap;}
|
||||
.info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
/* 弹窗 */
|
||||
.dialog-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
|
||||
.dialog-mask.open{display:flex;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:560px;max-width:90vw;box-shadow:var(--shadow-md);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);}
|
||||
.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.dialog__body{padding:24px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-group{margin-bottom:16px;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
.form-group label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input,.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;}
|
||||
.form-input:focus,.form-select:focus{border-color:var(--primary);}
|
||||
.form-select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px;}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🧪</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item active"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">👑</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍳</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">💡</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="din-dish-all.html">餐品总库</a>
|
||||
<span class="breadcrumb__sep">/</span>
|
||||
<span>红烧肉 - 餐品构成</span>
|
||||
</div>
|
||||
|
||||
<!-- 餐品基本信息 -->
|
||||
<div class="info-card">
|
||||
<div class="info-item"><span class="info-item__label">餐品编号</span><span class="info-item__value">DISH001</span></div>
|
||||
<div class="info-item"><span class="info-item__label">餐品名称</span><span class="info-item__value">红烧肉</span></div>
|
||||
<div class="info-item"><span class="info-item__label">餐品分类</span><span class="info-item__value">荤菜</span></div>
|
||||
<div class="info-item"><span class="info-item__label">单位重量</span><span class="info-item__value">200g</span></div>
|
||||
<div class="info-item"><span class="info-item__label">热量</span><span class="info-item__value">385 kcal/份</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openDialog()">➕ 新增食材</button>
|
||||
<a href="din-dish-all.html" class="btn btn-default">← 返回列表</a>
|
||||
</div>
|
||||
|
||||
<!-- 食材构成表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">食材构成（共 5 项）</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>食材名称</th><th>食材分类</th><th>用量(g/份)</th><th>占比(%)</th><th>加工状态</th><th>是否主料</th><th>过敏原</th><th>备注</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>猪五花肉</td><td>畜肉类</td><td>160</td><td>80%</td><td>净菜</td><td><span class="tag tag-green">主料</span></td><td>无</td><td>—</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>生姜</td><td>调料</td><td>5</td><td>2.5%</td><td>净菜</td><td><span class="tag tag-gray">辅料</span></td><td>无</td><td>—</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>生抽</td><td>调料</td><td>15</td><td>7.5%</td><td>原料</td><td><span class="tag tag-gray">辅料</span></td><td>含麸质</td><td>酱油</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>冰糖</td><td>调料</td><td>10</td><td>5%</td><td>原料</td><td><span class="tag tag-gray">辅料</span></td><td>无</td><td>上色提味</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>料酒</td><td>调料</td><td>10</td><td>5%</td><td>原料</td><td><span class="tag tag-gray">辅料</span></td><td>无</td><td>去腥</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增食材弹窗 -->
|
||||
<div class="dialog-mask" id="dialogMask">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增食材</div>
|
||||
<button class="dialog__close" onclick="closeDialog()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>食材名称<span class="required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="请输入食材名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>食材分类<span class="required">*</span></label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>畜肉类</option><option>禽肉类</option><option>蛋类</option><option>蔬菜类</option><option>谷薯类</option><option>油脂类</option><option>调料</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>用量(g/份)<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入用量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>加工状态</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>原料</option><option>净菜</option><option>半成品</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>是否主料</label>
|
||||
<select class="form-select">
|
||||
<option>辅料</option><option>主料</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>过敏原</label>
|
||||
<input class="form-input" type="text" placeholder="无则填无">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>备注</label>
|
||||
<input class="form-input" type="text" placeholder="请输入备注信息">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="closeDialog()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
function openDialog(){document.getElementById('dialogMask').classList.add('open');}
|
||||
function closeDialog(){document.getElementById('dialogMask').classList.remove('open');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -138,57 +138,152 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">食物编码<span class="required">*</span></label><input class="form-input" id="foodCode" placeholder="系统自动生成" readonly></div>
|
||||
<div class="form-group"><label class="form-label">食物编码<span class="required">*</span></label><input class="form-input" id="foodCode" placeholder="系统自动生成（一级分类+二级分类+自编码）" readonly></div>
|
||||
<div class="form-group"><label class="form-label">食物名称<span class="required">*</span></label><input class="form-input" id="foodName" placeholder="请输入食物名称"></div>
|
||||
<div class="form-group"><label class="form-label">别名</label><input class="form-input" id="foodAlias" placeholder="请输入别名"></div>
|
||||
<div class="form-group"><label class="form-label">食材分类<span class="required">*</span></label><select class="form-select" id="foodCategory"><option value="">请选择</option><option>谷薯类</option><option>畜肉类</option><option>蔬菜类</option><option>蛋类</option><option>豆类</option><option>水产类</option><option>水果类</option><option>乳制品</option></select></div>
|
||||
<div class="form-group"><label class="form-label">数据来源</label><select class="form-select" id="foodSource"><option>中国食物成分表</option><option>实验室检测</option><option>企业自测</option></select></div>
|
||||
<div class="form-group"><label class="form-label">常见过敏原</label><input class="form-input" id="foodAllergen" placeholder="如：含蛋类、含大豆"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 营养成分 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">营养成分（每100g）</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">热量(kcal)<span class="required">*</span></label><input class="form-input" id="energy" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">蛋白质(g)<span class="required">*</span></label><input class="form-input" id="protein" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">脂肪(g)<span class="required">*</span></label><input class="form-input" id="fat" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">碳水化合物(g)<span class="required">*</span></label><input class="form-input" id="carbs" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">膳食纤维(g)</label><input class="form-input" id="fiber" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">钙(mg)</label><input class="form-input" id="calcium" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">铁(mg)</label><input class="form-input" id="iron" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">钠(mg)</label><input class="form-input" id="sodium" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素C(mg)</label><input class="form-input" id="vitC" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素A(μg)</label><input class="form-input" id="vitA" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素E(mg)</label><input class="form-input" id="vitE" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">锌(mg)</label><input class="form-input" id="zinc" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">一级分类<span class="required">*</span></label><select class="form-select" id="firstClass"><option value="">请选择</option><option>谷薯类</option><option>畜禽肉类</option><option>水产类</option><option>蛋类</option><option>奶及奶制品</option><option>豆及豆制品</option><option>蔬菜类</option><option>水果类</option><option>坚果种子类</option><option>油脂类</option><option>调味品类</option></select></div>
|
||||
<div class="form-group"><label class="form-label">二级分类<span class="required">*</span></label><input class="form-input" id="secondClass" placeholder="请输入二级分类"></div>
|
||||
<div class="form-group"><label class="form-label">可食部分(%)</label><input class="form-input" id="edible" placeholder="0~100"></div>
|
||||
<div class="form-group"><label class="form-label">水分(%)</label><input class="form-input" id="waterRate" placeholder="0~100"></div>
|
||||
<div class="form-group"><label class="form-label">数据来源</label><select class="form-select" id="dataSource"><option value="0">系统内置</option><option value="1">手动添加</option></select></div>
|
||||
<div class="form-group"><label class="form-label">食材图片</label><input class="form-input" id="foodUrl" placeholder="图片URL或上传"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 感官档案 -->
|
||||
<!-- 营养成分：宏量营养素 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">感官档案</div>
|
||||
<div class="form-card__title">宏量营养素（每100g可食部）</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">能量(kcal)<span class="required">*</span></label><input class="form-input" id="calorie" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">蛋白质(g)<span class="required">*</span></label><input class="form-input" id="protein" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">脂肪(g)<span class="required">*</span></label><input class="form-input" id="fat" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">碳水化合物(g)<span class="required">*</span></label><input class="form-input" id="carbohydrate" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">膳食纤维(g)</label><input class="form-input" id="dietary_fiber" placeholder="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养成分：维生素 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">维生素</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">维生素A(μg RAE)</label><input class="form-input" id="vitamin_a" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">硫胺素/B1(mg)</label><input class="form-input" id="vitamin_b1" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">核黄素/B2(mg)</label><input class="form-input" id="vitamin_b2" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素B6(mg)</label><input class="form-input" id="vitamin_b6" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素B12(μg)</label><input class="form-input" id="vitamin_b12" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素C(mg)</label><input class="form-input" id="vitamin_c" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素D(μg)</label><input class="form-input" id="vitamin_d" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素E(mg α-TE)</label><input class="form-input" id="vitamin_e" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素K(μg)</label><input class="form-input" id="vitamin_k" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">烟酸(mg)</label><input class="form-input" id="niacin" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">叶酸(μg)</label><input class="form-input" id="folic_acid" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">生物素(μg)</label><input class="form-input" id="biotin" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">泛酸(mg)</label><input class="form-input" id="pantothenic_acid" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">总胆碱(mg)</label><input class="form-input" id="total_choline" placeholder="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养成分：矿物质 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">矿物质</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">钙(mg)</label><input class="form-input" id="ca" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">磷(mg)</label><input class="form-input" id="phosphorus" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">钾(mg)</label><input class="form-input" id="kalium" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">镁(mg)</label><input class="form-input" id="mg_el" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">钠(mg)</label><input class="form-input" id="na" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">铁(mg)</label><input class="form-input" id="fe" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">锌(mg)</label><input class="form-input" id="zn" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">硒(μg)</label><input class="form-input" id="se" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">铜(mg)</label><input class="form-input" id="cu" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">锰(mg)</label><input class="form-input" id="mn" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">碘(μg)</label><input class="form-input" id="iodine" placeholder="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养成分：脂质指标 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">脂质指标</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">胆固醇(mg)</label><input class="form-input" id="cholesterol" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">饱和脂肪酸(g)</label><input class="form-input" id="sfa" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">单不饱和脂肪酸(g)</label><input class="form-input" id="mufa" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">多不饱和脂肪酸(g)</label><input class="form-input" id="pufa" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">DHA(mg)</label><input class="form-input" id="dha" placeholder="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养成分：氨基酸 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">氨基酸</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">异亮氨酸(mg)</label><input class="form-input" id="ile" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">亮氨酸(mg)</label><input class="form-input" id="leu" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">酪氨酸(mg)</label><input class="form-input" id="tyr" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">赖氨酸(mg)</label><input class="form-input" id="lys" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">蛋氨酸(mg)</label><input class="form-input" id="met" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">苯丙氨酸(mg)</label><input class="form-input" id="phe" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">苏氨酸(mg)</label><input class="form-input" id="thr" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">色氨酸(mg)</label><input class="form-input" id="trp" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">缬氨酸(mg)</label><input class="form-input" id="val" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">蛋氨酸+胱氨酸(mg)</label><input class="form-input" id="met_cys" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">苯丙氨酸+酪氨酸(mg)</label><input class="form-input" id="phe_tyr" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">胱氨酸(mg)</label><input class="form-input" id="cys" placeholder="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养成分：特殊指标 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">特殊指标</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">GI</label><input class="form-input" id="gi" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">总嘌呤(mg)</label><input class="form-input" id="purine" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">鸟嘌呤(mg)</label><input class="form-input" id="guanine" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">腺嘌呤(mg)</label><input class="form-input" id="adenine" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">次黄嘌呤(mg)</label><input class="form-input" id="hypoxanthine" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">黄嘌呤(mg)</label><input class="form-input" id="xanthine" placeholder="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 色泽档案 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">🎨 色泽档案</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">主色系</label><input class="form-input" id="colorMain" placeholder="如：白色、深绿色"></div>
|
||||
<div class="form-group"><label class="form-label">色泽描述</label><input class="form-input" id="colorDesc" placeholder="请描述色泽特征"></div>
|
||||
<div class="form-group"><label class="form-label">感官评级</label><select class="form-select" id="sensoryGrade"><option value="">请选择</option><option>优</option><option>良</option><option>中</option><option>差</option></select></div>
|
||||
<div class="form-group"><label class="form-label">感官评级</label><select class="form-select" id="colorGrade"><option value="">请选择</option><option>优</option><option>良</option><option>中</option><option>差</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">色泽描述</label><textarea class="form-textarea" id="colorDesc" placeholder="请描述色泽特征，如：乳白色，半透明，颗粒饱满"></textarea></div>
|
||||
<div class="form-group full"><label class="form-label">色泽成因</label><textarea class="form-textarea" id="colorCause" placeholder="请描述色泽形成原因"></textarea></div>
|
||||
<div class="form-group"><label class="form-label">适配人群</label><input class="form-input" id="colorCrowd" placeholder="如：成人、老年人、儿童"></div>
|
||||
<div class="form-group"><label class="form-label">适配等级</label><select class="form-select" id="colorLevel"><option value="">请选择</option><option>推荐</option><option>适量</option><option>慎食</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">备注</label><input class="form-input" id="colorNote" placeholder="如：高血脂人群每日不超过1个"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 味道档案 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">👅 味道档案</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">主味型</label><input class="form-input" id="tasteMain" placeholder="如：淡味、鲜味、甜味"></div>
|
||||
<div class="form-group"><label class="form-label">辅味型</label><input class="form-input" id="tasteSub" placeholder="如：微涩、豆香"></div>
|
||||
<div class="form-group"><label class="form-label">味道强度</label><select class="form-select" id="tasteLevel"><option value="">请选择</option><option>弱</option><option>中</option><option>强</option></select></div>
|
||||
<div class="form-group"><label class="form-label">味道强度</label><select class="form-select" id="tasteIntensity"><option value="">请选择</option><option>弱</option><option>中</option><option>强</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">味道描述</label><textarea class="form-textarea" id="tasteDesc" placeholder="请描述味道特征"></textarea></div>
|
||||
<div class="form-group"><label class="form-label">适配人群</label><input class="form-input" id="tasteCrowd" placeholder="如：全人群、糖尿病人群"></div>
|
||||
<div class="form-group"><label class="form-label">适配等级</label><select class="form-select" id="tasteLevel"><option value="">请选择</option><option>推荐</option><option>适量</option><option>慎食</option></select></div>
|
||||
<div class="form-group full"><label class="form-label">饮食禁忌说明</label><input class="form-input" id="tasteNote" placeholder="如：糖尿病人群注意控制量"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 口感档案 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">🫦 口感档案</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">主质地</label><input class="form-input" id="textureMain" placeholder="如：软糯、嫩滑、细腻"></div>
|
||||
<div class="form-group"><label class="form-label">咀嚼难度</label><select class="form-select" id="chewDiff"><option value="">请选择</option><option>易</option><option>中</option><option>难</option></select></div>
|
||||
<div class="form-group"><label class="form-label">消化难度</label><select class="form-select" id="digestDiff"><option value="">请选择</option><option>易</option><option>中</option><option>难</option></select></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 适配信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">适配信息</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">适配人群</label><input class="form-input" id="fitPeople" placeholder="如：全人群、成人、老年人"></div>
|
||||
<div class="form-group"><label class="form-label">适配等级</label><select class="form-select" id="fitLevel"><option value="">请选择</option><option>推荐</option><option>适量</option><option>慎食</option></select></div>
|
||||
<div class="form-group"><label class="form-label">饮食禁忌说明</label><input class="form-input" id="taboo" placeholder="如：糖尿病人群注意控制量"></div>
|
||||
<div class="form-group full"><label class="form-label">口感描述</label><textarea class="form-textarea" id="textureDesc" placeholder="请描述口感特征"></textarea></div>
|
||||
<div class="form-group full"><label class="form-label">烹饪建议</label><textarea class="form-textarea" id="cookAdvice" placeholder="请输入烹饪建议"></textarea></div>
|
||||
<div class="form-group"><label class="form-label">适配人群</label><input class="form-input" id="textureCrowd" placeholder="如：全人群、老年人、术后恢复"></div>
|
||||
<div class="form-group"><label class="form-label">适配等级</label><select class="form-select" id="textureLevel"><option value="">请选择</option><option>推荐</option><option>适量</option><option>慎食</option></select></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -212,7 +307,6 @@ var mode=params.get('mode');
|
||||
if(mode==='view'){
|
||||
document.getElementById('breadcrumbTitle').textContent='食物详情';
|
||||
document.title='营养管理 - 食物详情 | 健康长庆原型';
|
||||
// 详情模式：所有输入框只读
|
||||
document.querySelectorAll('.form-input,.form-select,.form-textarea').forEach(function(el){
|
||||
if(el.tagName==='SELECT'){el.disabled=true;}
|
||||
else{el.readOnly=true;}
|
||||
@@ -223,42 +317,27 @@ if(mode==='view'){
|
||||
document.title='营养管理 - 编辑食物 | 健康长庆原型';
|
||||
}
|
||||
|
||||
// 模拟数据填充（编辑/详情模式）
|
||||
// 模拟数据填充
|
||||
if(code){
|
||||
var mockData={
|
||||
'F001001':{name:'粳米(生)',alias:'大米',category:'谷薯类',source:'中国食物成分表',allergen:'无',energy:'346',protein:'7.4',fat:'0.8',carbs:'77.2',fiber:'0.6',calcium:'13',iron:'2.3',sodium:'3.8',vitC:'0',colorMain:'白色',colorDesc:'乳白色，半透明，颗粒饱满',sensoryGrade:'优',tasteMain:'淡味',tasteSub:'—',tasteLevel:'弱',textureMain:'软糯',chewDiff:'易',digestDiff:'易',fitPeople:'全人群、老年人、术后恢复',fitLevel:'推荐',taboo:'糖尿病人群注意控制量',cookAdvice:'熬粥质地更软，适合老年人'},
|
||||
'F002001':{name:'猪里脊肉',alias:'里脊',category:'畜肉类',source:'中国食物成分表',allergen:'无',energy:'155',protein:'20.2',fat:'7.9',carbs:'0.7',fiber:'0',calcium:'6',iron:'1.5',sodium:'43.2',vitC:'0',colorMain:'粉红色',colorDesc:'鲜嫩粉红，有光泽',sensoryGrade:'优',tasteMain:'鲜味',tasteSub:'淡咸',tasteLevel:'中',textureMain:'嫩滑',chewDiff:'中',digestDiff:'中',fitPeople:'成人、儿童',fitLevel:'适量',taboo:'肾病人群需控制蛋白质摄入',cookAdvice:'老年人建议炖煮至软烂'}
|
||||
'0101001':{foodName:'粳米(生)',foodAlias:'大米',firstClass:'谷薯类',secondClass:'稻米',edible:'100',waterRate:'13.3',dataSource:'0',
|
||||
calorie:'346',protein:'7.4',fat:'0.8',carbohydrate:'77.2',dietary_fiber:'0.6',
|
||||
vitamin_a:'0',vitamin_b1:'0.16',vitamin_b2:'0.08',vitamin_b6:'0.16',vitamin_b12:'0',vitamin_c:'0',vitamin_d:'0',vitamin_e:'0.46',vitamin_k:'0',niacin:'1.9',folic_acid:'3.8',biotin:'0',pantothenic_acid:'0.6',total_choline:'0',
|
||||
ca:'13',phosphorus:'110',kalium:'103',mg_el:'34',na:'3.8',fe:'2.3',zn:'1.7',se:'2.23',cu:'0.3',mn:'1.29',iodine:'0',
|
||||
cholesterol:'0',sfa:'0.18',mufa:'0.17',pufa:'0.22',dha:'0',
|
||||
ile:'292',leu:'594',tyr:'332',lys:'255',met:'163',phe:'372',thr:'244',trp:'93',val:'420',met_cys:'276',phe_tyr:'704',cys:'113',
|
||||
gi:'83',purine:'18.4',guanine:'0',adenine:'0',hypoxanthine:'0',xanthine:'0',
|
||||
colorMain:'白色',colorGrade:'优',colorDesc:'乳白色，半透明，颗粒饱满',colorCause:'淀粉主体，含少量蛋白质',colorCrowd:'成人、老年人、儿童',colorLevel:'推荐',colorNote:'',
|
||||
tasteMain:'淡味',tasteSub:'—',tasteIntensity:'弱',tasteDesc:'清淡，煮熟后微甜，无异味',tasteCrowd:'全人群、糖尿病人群',tasteLevel:'适量',tasteNote:'糖尿病人群注意控制量',
|
||||
textureMain:'软糯',chewDiff:'易',digestDiff:'易',textureDesc:'煮熟后软糯有嚼劲，易于消化',cookAdvice:'熬粥质地更软，适合老年人',textureCrowd:'全人群、老年人、术后恢复',textureLevel:'推荐'}
|
||||
};
|
||||
var d=mockData[code];
|
||||
if(d){
|
||||
document.getElementById('foodCode').value=code;
|
||||
document.getElementById('foodName').value=d.name||'';
|
||||
document.getElementById('foodAlias').value=d.alias||'';
|
||||
document.getElementById('foodCategory').value=d.category||'';
|
||||
document.getElementById('foodSource').value=d.source||'';
|
||||
document.getElementById('foodAllergen').value=d.allergen||'';
|
||||
document.getElementById('energy').value=d.energy||'';
|
||||
document.getElementById('protein').value=d.protein||'';
|
||||
document.getElementById('fat').value=d.fat||'';
|
||||
document.getElementById('carbs').value=d.carbs||'';
|
||||
document.getElementById('fiber').value=d.fiber||'';
|
||||
document.getElementById('calcium').value=d.calcium||'';
|
||||
document.getElementById('iron').value=d.iron||'';
|
||||
document.getElementById('sodium').value=d.sodium||'';
|
||||
document.getElementById('vitC').value=d.vitC||'';
|
||||
document.getElementById('colorMain').value=d.colorMain||'';
|
||||
document.getElementById('colorDesc').value=d.colorDesc||'';
|
||||
document.getElementById('sensoryGrade').value=d.sensoryGrade||'';
|
||||
document.getElementById('tasteMain').value=d.tasteMain||'';
|
||||
document.getElementById('tasteSub').value=d.tasteSub||'';
|
||||
document.getElementById('tasteLevel').value=d.tasteLevel||'';
|
||||
document.getElementById('textureMain').value=d.textureMain||'';
|
||||
document.getElementById('chewDiff').value=d.chewDiff||'';
|
||||
document.getElementById('digestDiff').value=d.digestDiff||'';
|
||||
document.getElementById('fitPeople').value=d.fitPeople||'';
|
||||
document.getElementById('fitLevel').value=d.fitLevel||'';
|
||||
document.getElementById('taboo').value=d.taboo||'';
|
||||
document.getElementById('cookAdvice').value=d.cookAdvice||'';
|
||||
Object.keys(d).forEach(function(key){
|
||||
var el=document.getElementById(key);
|
||||
if(el) el.value=d[key];
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -31,7 +31,6 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
@@ -52,32 +51,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.stat-card__info{display:flex;flex-direction:column;gap:4px;}
|
||||
.stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);border-bottom:2px solid var(--border);}
|
||||
.page-tab{padding:14px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;display:flex;align-items:center;gap:6px;}
|
||||
.page-tab:hover{color:var(--primary);}
|
||||
.page-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.filter-bar{background:#fff;border-radius:0 0 var(--radius-md) var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:160px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);margin-right:4px;}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
@@ -85,10 +61,64 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
|
||||
/* 左右分栏布局 */
|
||||
.master-detail{display:flex;gap:16px;height:calc(100vh - 56px - 24px - 24px - 100px);}
|
||||
.panel-left{width:380px;flex-shrink:0;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.panel-right{flex:1;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
|
||||
/* 左侧面板 */
|
||||
.panel-left__header{padding:16px 20px 12px;border-bottom:1px solid var(--border);}
|
||||
.panel-left__title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
|
||||
.panel-left__search{display:flex;gap:8px;margin-bottom:10px;}
|
||||
.panel-left__search input{flex:1;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);outline:none;}
|
||||
.panel-left__search input:focus{border-color:var(--primary);}
|
||||
.panel-left__filter{display:flex;gap:8px;}
|
||||
.panel-left__filter select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 10px;font-size:var(--font-xs);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;cursor:pointer;flex:1;}
|
||||
.panel-left__actions{display:flex;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border);}
|
||||
.panel-left__actions .btn{height:30px;font-size:var(--font-xs);padding:0 10px;}
|
||||
.food-list{flex:1;overflow-y:auto;padding:4px 0;}
|
||||
.food-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;}
|
||||
.food-item:hover{background:#F8FBFF;}
|
||||
.food-item.active{background:var(--primary-light);border-left-color:var(--primary);}
|
||||
.food-item__icon{width:36px;height:36px;border-radius:var(--radius-sm);background:#F5F7FA;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
|
||||
.food-item__info{flex:1;min-width:0;}
|
||||
.food-item__name{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.food-item__meta{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:2px;display:flex;gap:8px;}
|
||||
.panel-left__footer{padding:10px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
|
||||
.panel-left__footer span{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.page-btn{width:26px;height:26px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-xs);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
|
||||
/* 右侧详情面板 */
|
||||
.panel-right__header{padding:16px 24px 0;border-bottom:1px solid var(--border);}
|
||||
.panel-right__food-title{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
|
||||
.panel-right__food-title h2{font-size:var(--font-lg);font-weight:600;}
|
||||
.panel-right__food-title .code{font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
.panel-right__food-title .category{font-size:var(--font-xs);background:#F0F5FF;color:var(--primary);padding:2px 8px;border-radius:10px;}
|
||||
.detail-tabs{display:flex;gap:0;}
|
||||
.detail-tab{padding:10px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;display:flex;align-items:center;gap:5px;}
|
||||
.detail-tab:hover{color:var(--primary);}
|
||||
.detail-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.panel-right__body{flex:1;overflow-y:auto;padding:20px 24px;}
|
||||
.detail-panel{display:none;}
|
||||
.detail-panel.active{display:block;}
|
||||
|
||||
/* 营养成分网格 */
|
||||
.nutri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
|
||||
.nutri-cell{background:#FAFBFC;border-radius:var(--radius-sm);padding:14px 16px;border:1px solid #F0F0F0;}
|
||||
.nutri-cell__label{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:4px;}
|
||||
.nutri-cell__value{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.nutri-cell__unit{font-size:var(--font-xs);color:var(--text-secondary);margin-left:2px;font-weight:400;}
|
||||
|
||||
/* 档案详情卡片 */
|
||||
.profile-section{margin-bottom:20px;}
|
||||
.profile-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #F0F0F0;}
|
||||
.profile-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;}
|
||||
.profile-field{display:flex;flex-direction:column;gap:4px;}
|
||||
.profile-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.profile-field__value{font-size:var(--font-sm);color:var(--text-primary);line-height:1.5;}
|
||||
.profile-field--full{grid-column:1/-1;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -157,269 +187,295 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🧪</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">2,486</div><div class="stat-card__label">食物条目数</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">📊</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">32项</div><div class="stat-card__label">营养素维度</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">👥</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">6类</div><div class="stat-card__label">关联人群类型</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon red">⚠️</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">38条</div><div class="stat-card__label">含慎食人群</div></div>
|
||||
</div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🧪</div><div class="stat-card__info"><div class="stat-card__value">2,486</div><div class="stat-card__label">食物条目数</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">📊</div><div class="stat-card__info"><div class="stat-card__value">53项</div><div class="stat-card__label">营养素维度</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon orange">👥</div><div class="stat-card__info"><div class="stat-card__value">6类</div><div class="stat-card__label">关联人群类型</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon red">⚠️</div><div class="stat-card__info"><div class="stat-card__value">38条</div><div class="stat-card__label">含慎食人群</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换栏 -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(0)">🧪 营养成分</div>
|
||||
<div class="page-tab" onclick="switchTab(1)">🎨 色泽档案</div>
|
||||
<div class="page-tab" onclick="switchTab(2)">👅 味道档案</div>
|
||||
<div class="page-tab" onclick="switchTab(3)">🫦 口感档案</div>
|
||||
</div>
|
||||
<!-- 左右分栏 -->
|
||||
<div class="master-detail">
|
||||
<!-- 左侧：食物列表 -->
|
||||
<div class="panel-left">
|
||||
<div class="panel-left__header">
|
||||
<div class="panel-left__title">食物列表</div>
|
||||
<div class="panel-left__search">
|
||||
<input type="text" placeholder="搜索食物名称/编码...">
|
||||
<button class="btn btn-primary" style="height:32px;padding:0 12px;font-size:var(--font-xs);">搜索</button>
|
||||
</div>
|
||||
<div class="panel-left__filter">
|
||||
<select><option>全部一级分类</option><option>谷薯类</option><option>畜禽肉类</option><option>水产类</option><option>蛋类</option><option>奶及奶制品</option><option>豆及豆制品</option><option>蔬菜类</option><option>水果类</option><option>坚果种子类</option><option>油脂类</option><option>调味品类</option></select>
|
||||
<select><option>全部来源</option><option>系统内置</option><option>手动添加</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-left__actions">
|
||||
<a href="din-ingredient-detail.html" class="btn btn-primary">➕ 新增食物</a>
|
||||
<button class="btn btn-default">🔄 同步国标库</button>
|
||||
</div>
|
||||
<div class="food-list">
|
||||
<div class="food-item active" onclick="selectFood(0)">
|
||||
<div class="food-item__icon">🌾</div>
|
||||
<div class="food-item__info"><div class="food-item__name">粳米(生)</div><div class="food-item__meta"><span>0101001</span><span>谷薯类/稻米</span><span>346 kcal</span></div></div>
|
||||
</div>
|
||||
<div class="food-item" onclick="selectFood(1)">
|
||||
<div class="food-item__icon">🥩</div>
|
||||
<div class="food-item__info"><div class="food-item__name">猪里脊肉</div><div class="food-item__meta"><span>0201001</span><span>畜禽肉类/猪肉</span><span>155 kcal</span></div></div>
|
||||
</div>
|
||||
<div class="food-item" onclick="selectFood(2)">
|
||||
<div class="food-item__icon">🥬</div>
|
||||
<div class="food-item__info"><div class="food-item__name">菠菜</div><div class="food-item__meta"><span>0701001</span><span>蔬菜类/叶菜类</span><span>24 kcal</span></div></div>
|
||||
</div>
|
||||
<div class="food-item" onclick="selectFood(3)">
|
||||
<div class="food-item__icon">🥚</div>
|
||||
<div class="food-item__info"><div class="food-item__name">鸡蛋</div><div class="food-item__meta"><span>0401001</span><span>蛋类/鸡蛋</span><span>144 kcal</span></div></div>
|
||||
</div>
|
||||
<div class="food-item" onclick="selectFood(4)">
|
||||
<div class="food-item__icon">🧈</div>
|
||||
<div class="food-item__info"><div class="food-item__name">豆腐(北)</div><div class="food-item__meta"><span>0601001</span><span>豆及豆制品/豆制品</span><span>98 kcal</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-left__footer">
|
||||
<span>共 2,486 条</span>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 营养成分 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>食物名称</label><input class="filter-input" placeholder="请输入食物名称"></div>
|
||||
<div class="filter-item"><label>食物类别</label>
|
||||
<select class="filter-select"><option>全部</option><option>谷薯类</option><option>畜肉类</option><option>蔬菜类</option><option>蛋类</option><option>豆类</option></select>
|
||||
<!-- 右侧：食物详情 -->
|
||||
<div class="panel-right">
|
||||
<div class="panel-right__header">
|
||||
<div class="panel-right__food-title">
|
||||
<h2 id="detail-food-name">粳米(生)</h2>
|
||||
<span class="code" id="detail-food-code">0101001</span>
|
||||
<span class="category" id="detail-food-category">谷薯类 / 稻米</span>
|
||||
<a class="link" href="din-ingredient-detail.html?code=0101001" style="margin-left:auto;">编辑</a>
|
||||
<a class="link" href="din-ingredient-detail.html?code=0101001&mode=view">查看完整详情</a>
|
||||
</div>
|
||||
<div class="detail-tabs">
|
||||
<div class="detail-tab active" onclick="switchDetailTab(0)">🧪 营养成分</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(1)">🎨 色泽档案</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(2)">👅 味道档案</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(3)">🫦 口感档案</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<a href="din-ingredient-detail.html" class="btn btn-primary">➕ 新增食物</a>
|
||||
<button class="btn btn-default">🔄 同步国标库</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">营养成分</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>食物编码</th><th>食物名称</th><th>别名</th><th>食材分类</th><th>热量(kcal/100g)</th><th>蛋白质(g)</th><th>脂肪(g)</th><th>碳水(g)</th><th>膳食纤维(g)</th><th>钙(mg)</th><th>铁(mg)</th><th>钠(mg)</th><th>维生素C(mg)</th><th>常见过敏原</th><th>数据来源</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>F001001</td><td>粳米(生)</td><td>大米</td><td>谷薯类</td><td>346</td><td>7.4</td><td>0.8</td><td>77.2</td><td>0.6</td><td>13</td><td>2.3</td><td>3.8</td><td>0</td><td>无</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F001001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F001001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F002001</td><td>猪里脊肉</td><td>里脊</td><td>畜肉类</td><td>155</td><td>20.2</td><td>7.9</td><td>0.7</td><td>0</td><td>6</td><td>1.5</td><td>43.2</td><td>0</td><td>无</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F002001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F002001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F003001</td><td>菠菜</td><td>菠菜</td><td>蔬菜类</td><td>24</td><td>2.6</td><td>0.3</td><td>3.1</td><td>1.7</td><td>66</td><td>2.9</td><td>85.2</td><td>32</td><td>无</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F003001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F003001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F004001</td><td>鸡蛋</td><td>鸡蛋</td><td>蛋类</td><td>144</td><td>13.3</td><td>8.8</td><td>2.8</td><td>0</td><td>56</td><td>2.0</td><td>131.5</td><td>0</td><td>含蛋类</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F004001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F004001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F005001</td><td>豆腐(北)</td><td>北豆腐</td><td>豆类</td><td>98</td><td>12.2</td><td>4.8</td><td>1.5</td><td>0.4</td><td>138</td><td>2.5</td><td>7.2</td><td>0</td><td>含大豆</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F005001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F005001&mode=view">详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 2,486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 色泽档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>食物名称</label><input class="filter-input" placeholder="请输入食物名称"></div>
|
||||
<div class="filter-item"><label>主色系</label>
|
||||
<select class="filter-select"><option>全部</option><option>白色</option><option>乳白色</option><option>米黄色</option><option>粉红色</option><option>深绿色</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配人群</label>
|
||||
<select class="filter-select"><option>全部</option><option>全人群</option><option>成人</option><option>老年人</option><option>儿童</option><option>孕妇</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配等级</label>
|
||||
<select class="filter-select"><option>全部</option><option>推荐</option><option>适量</option><option>慎食</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新增色泽档案</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">色泽档案</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>食物编码</th><th>食物名称</th><th>主色系</th><th>色泽描述</th><th>色泽成因</th><th>感官评级</th><th>适配人群</th><th>适配等级</th><th>备注</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>F001001</td><td>粳米(生)</td><td>白色</td><td>乳白色，半透明，颗粒饱满</td><td>淀粉主体，含少量蛋白质</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">老年人</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><a class="link" href="din-ingredient-detail.html?code=F001001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F001001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F002001</td><td>猪里脊肉</td><td>粉红色</td><td>鲜嫩粉红，有光泽，纹理细腻</td><td>肌红蛋白含量适中</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>老年人消化负担稍重</td><td><a class="link" href="din-ingredient-detail.html?code=F002001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F002001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F003001</td><td>菠菜</td><td>深绿色</td><td>翠绿鲜亮，叶片厚实，颜色均匀</td><td>叶绿素含量丰富，含胡萝卜素</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">孕妇</span><span class="tag tag-green">贫血人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>富含叶酸，孕妇适宜</td><td><a class="link" href="din-ingredient-detail.html?code=F003001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F003001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F004001</td><td>鸡蛋</td><td>米黄色</td><td>蛋黄橙黄，蛋白透明，整体色泽亮</td><td>蛋黄富含类胡萝卜素</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">儿童</span><span class="tag tag-red">高血脂人群</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>高血脂人群每日不超过1个</td><td><a class="link" href="din-ingredient-detail.html?code=F004001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F004001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F005001</td><td>豆腐(北)</td><td>乳白色</td><td>洁白细腻，质地均匀，有光泽</td><td>大豆蛋白凝固，含水量高</td><td>优</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">高血压人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>低脂优质蛋白，适合多数人群</td><td><a class="link" href="din-ingredient-detail.html?code=F005001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F005001&mode=view">详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 2,486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 味道档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>食物名称</label><input class="filter-input" placeholder="请输入食物名称"></div>
|
||||
<div class="filter-item"><label>主味型</label>
|
||||
<select class="filter-select"><option>全部</option><option>淡味</option><option>鲜味</option><option>甜味</option><option>酸味</option><option>苦味</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配人群</label>
|
||||
<select class="filter-select"><option>全部</option><option>全人群</option><option>成人</option><option>儿童</option><option>糖尿病人群</option><option>肾病人群</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配等级</label>
|
||||
<select class="filter-select"><option>全部</option><option>推荐</option><option>适量</option><option>慎食</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新增味道档案</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">味道档案</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>食物编码</th><th>食物名称</th><th>主味型</th><th>辅味型</th><th>味道强度</th><th>味道描述</th><th>适配人群</th><th>适配等级</th><th>饮食禁忌说明</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>F001001</td><td>粳米(生)</td><td>淡味</td><td>—</td><td>弱</td><td>清淡，煮熟后微甜，无异味</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-orange">糖尿病人群</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>糖尿病人群注意控制量</td><td><a class="link" href="din-ingredient-detail.html?code=F001001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F001001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F002001</td><td>猪里脊肉</td><td>鲜味</td><td>淡咸</td><td>中</td><td>肉香鲜美，脂肪少，口感纯正</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">儿童</span><span class="tag tag-red">肾病人群</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>肾病人群需控制蛋白质摄入</td><td><a class="link" href="din-ingredient-detail.html?code=F002001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F002001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F003001</td><td>菠菜</td><td>淡味</td><td>微涩</td><td>弱</td><td>轻微涩感（草酸），汆烫后消失</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-red">肾结石人群</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>肾结石人群慎食，草酸含量高</td><td><a class="link" href="din-ingredient-detail.html?code=F003001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F003001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F004001</td><td>鸡蛋</td><td>鲜味</td><td>淡味</td><td>中</td><td>蛋黄浓郁，蛋白清淡，整体鲜香</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>优质蛋白，味道适中</td><td><a class="link" href="din-ingredient-detail.html?code=F004001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F004001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F005001</td><td>豆腐(北)</td><td>淡味</td><td>豆香</td><td>弱</td><td>清淡豆香，口感温和，无刺激性</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-orange">痛风人群</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>痛风急性期适量，嘌呤含量偏高</td><td><a class="link" href="din-ingredient-detail.html?code=F005001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F005001&mode=view">详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 2,486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 口感档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>食物名称</label><input class="filter-input" placeholder="请输入食物名称"></div>
|
||||
<div class="filter-item"><label>主质地</label>
|
||||
<select class="filter-select"><option>全部</option><option>软糯</option><option>嫩软</option><option>嫩滑</option><option>细腻</option><option>酥脆</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>咀嚼难度</label>
|
||||
<select class="filter-select"><option>全部</option><option>易</option><option>中</option><option>难</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配人群</label>
|
||||
<select class="filter-select"><option>全部</option><option>全人群</option><option>成人</option><option>老年人</option><option>婴幼儿</option><option>术后恢复</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配等级</label>
|
||||
<select class="filter-select"><option>全部</option><option>推荐</option><option>适量</option><option>慎食</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新增口感档案</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">口感档案</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>食物编码</th><th>食物名称</th><th>主质地</th><th>咀嚼难度</th><th>消化难度</th><th>口感描述</th><th>适配人群</th><th>适配等级</th><th>烹饪建议</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>F001001</td><td>粳米(生)</td><td>软糯</td><td>易</td><td>易</td><td>煮熟后软糯有嚼劲，易于消化</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">老年人</span><span class="tag tag-green">术后恢复</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>熬粥质地更软，适合老年人</td><td><a class="link" href="din-ingredient-detail.html?code=F001001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F001001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F002001</td><td>猪里脊肉</td><td>嫩滑</td><td>中</td><td>中</td><td>肌纤维细腻，炒制后滑嫩，少筋膜</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>老年人建议炖煮至软烂，避免大块</td><td><a class="link" href="din-ingredient-detail.html?code=F002001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F002001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F003001</td><td>菠菜</td><td>嫩软</td><td>易</td><td>易</td><td>叶片薄嫩，焯水后柔软，汁水丰富</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">老年人</span><span class="tag tag-orange">婴幼儿</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>婴幼儿建议打泥处理，去除纤维</td><td><a class="link" href="din-ingredient-detail.html?code=F003001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F003001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F004001</td><td>鸡蛋</td><td>嫩滑</td><td>易</td><td>易</td><td>水煮蛋弹嫩，炒蛋软嫩，蒸蛋细腻</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">婴幼儿</span><span class="tag tag-green">老年人</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>蒸蛋口感最软，适合各年龄段</td><td><a class="link" href="din-ingredient-detail.html?code=F004001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F004001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F005001</td><td>豆腐(北)</td><td>细腻</td><td>易</td><td>易</td><td>质地细腻滑嫩，入口即化，无渣感</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">老年人</span><span class="tag tag-green">术后恢复</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>细腻易消化，适合消化功能弱者</td><td><a class="link" href="din-ingredient-detail.html?code=F005001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F005001&mode=view">详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 2,486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<div class="panel-right__body" id="detail-body">
|
||||
<!-- 动态渲染详情内容 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
// 食物数据（对齐 yx_mater_base_material 表结构）
|
||||
const FOODS = [
|
||||
{name:'粳米(生)',code:'0101001',alias:'大米',firstClass:'谷薯类',secondClass:'稻米',icon:'🌾',edible:'100',waterRate:'13.3',dataSource:0,
|
||||
nutri:{calorie:346,protein:7.4,fat:0.8,carbohydrate:77.2,dietary_fiber:0.6,
|
||||
vitamin_a:0,vitamin_b1:0.16,vitamin_b2:0.08,vitamin_b6:0.16,vitamin_b12:0,vitamin_c:0,vitamin_d:0,vitamin_e:0.46,vitamin_k:0,niacin:1.9,folic_acid:3.8,biotin:0,pantothenic_acid:0.6,total_choline:0,
|
||||
ca:13,phosphorus:110,kalium:103,mg:34,na:3.8,fe:2.3,zn:1.7,se:2.23,cu:0.3,mn:1.29,iodine:0,
|
||||
cholesterol:0,sfa:0.18,mufa:0.17,pufa:0.22,dha:0,
|
||||
ile:292,leu:594,tyr:332,lys:255,met:163,phe:372,thr:244,trp:93,val:420,met_cys:276,phe_tyr:704,cys:113,
|
||||
gi:83,purine:18.4,guanine:0,adenine:0,hypoxanthine:0,xanthine:0},
|
||||
color:{main:'白色',desc:'乳白色，半透明，颗粒饱满',cause:'淀粉主体，含少量蛋白质',grade:'优',crowd:[{name:'成人',level:'推荐'},{name:'老年人',level:'推荐'},{name:'儿童',level:'推荐'}],note:'—'},
|
||||
taste:{main:'淡味',sub:'—',intensity:'弱',desc:'清淡，煮熟后微甜，无异味',crowd:[{name:'全人群',level:'推荐'},{name:'糖尿病人群',level:'适量'}],note:'糖尿病人群注意控制量'},
|
||||
texture:{main:'软糯',chew:'易',digest:'易',desc:'煮熟后软糯有嚼劲，易于消化',crowd:[{name:'全人群',level:'推荐'},{name:'老年人',level:'推荐'},{name:'术后恢复',level:'推荐'}],cook:'熬粥质地更软，适合老年人'}},
|
||||
{name:'猪里脊肉',code:'0201001',alias:'里脊',firstClass:'畜禽肉类',secondClass:'猪肉',icon:'🥩',edible:'100',waterRate:'71.4',dataSource:0,
|
||||
nutri:{calorie:155,protein:20.2,fat:7.9,carbohydrate:0.7,dietary_fiber:0,
|
||||
vitamin_a:6,vitamin_b1:0.54,vitamin_b2:0.1,vitamin_b6:0.33,vitamin_b12:0.6,vitamin_c:0,vitamin_d:0,vitamin_e:0.34,vitamin_k:0,niacin:5.3,folic_acid:3,biotin:0,pantothenic_acid:0.8,total_choline:0,
|
||||
ca:6,phosphorus:196,kalium:305,mg:25,na:43.2,fe:1.5,zn:2.3,se:11.97,cu:0.09,mn:0.01,iodine:0,
|
||||
cholesterol:55,sfa:2.8,mufa:3.4,pufa:0.9,dha:0,
|
||||
ile:930,leu:1580,tyr:680,lys:1740,met:520,phe:780,thr:880,trp:230,val:1020,met_cys:780,phe_tyr:1460,cys:260,
|
||||
gi:0,purine:132.6,guanine:28.5,adenine:42.3,hypoxanthine:51.2,xanthine:10.6},
|
||||
color:{main:'粉红色',desc:'鲜嫩粉红，有光泽，纹理细腻',cause:'肌红蛋白含量适中',grade:'优',crowd:[{name:'成人',level:'推荐'},{name:'老年人',level:'适量'}],note:'老年人消化负担稍重'},
|
||||
taste:{main:'鲜味',sub:'淡咸',intensity:'中',desc:'肉香鲜美，脂肪少，口感纯正',crowd:[{name:'成人',level:'推荐'},{name:'儿童',level:'推荐'},{name:'肾病人群',level:'慎食'}],note:'肾病人群需控制蛋白质摄入'},
|
||||
texture:{main:'嫩滑',chew:'中',digest:'中',desc:'肌纤维细腻，炒制后滑嫩，少筋膜',crowd:[{name:'成人',level:'推荐'},{name:'老年人',level:'适量'},{name:'儿童',level:'推荐'}],cook:'老年人建议炖煮至软烂，避免大块'}},
|
||||
{name:'菠菜',code:'0701001',alias:'菠菜',firstClass:'蔬菜类',secondClass:'叶菜类',icon:'🥬',edible:'89',waterRate:'91.2',dataSource:0,
|
||||
nutri:{calorie:24,protein:2.6,fat:0.3,carbohydrate:3.1,dietary_fiber:1.7,
|
||||
vitamin_a:487,vitamin_b1:0.04,vitamin_b2:0.11,vitamin_b6:0.1,vitamin_b12:0,vitamin_c:32,vitamin_d:0,vitamin_e:1.74,vitamin_k:483,niacin:0.6,folic_acid:110,biotin:0,pantothenic_acid:0.2,total_choline:0,
|
||||
ca:66,phosphorus:47,kalium:311,mg:58,na:85.2,fe:2.9,zn:0.85,se:0.97,cu:0.1,mn:0.66,iodine:0,
|
||||
cholesterol:0,sfa:0.05,mufa:0.01,pufa:0.12,dha:0,
|
||||
ile:140,leu:220,tyr:110,lys:160,met:50,phe:130,thr:120,trp:40,val:150,met_cys:80,phe_tyr:240,cys:30,
|
||||
gi:15,purine:23.0,guanine:5.1,adenine:8.2,hypoxanthine:7.3,xanthine:2.4},
|
||||
color:{main:'深绿色',desc:'翠绿鲜亮，叶片厚实，颜色均匀',cause:'叶绿素含量丰富，含胡萝卜素',grade:'优',crowd:[{name:'成人',level:'推荐'},{name:'孕妇',level:'推荐'},{name:'贫血人群',level:'推荐'}],note:'富含叶酸，孕妇适宜'},
|
||||
taste:{main:'淡味',sub:'微涩',intensity:'弱',desc:'轻微涩感（草酸），汆烫后消失',crowd:[{name:'全人群',level:'推荐'},{name:'肾结石人群',level:'慎食'}],note:'肾结石人群慎食，草酸含量高'},
|
||||
texture:{main:'嫩软',chew:'易',digest:'易',desc:'叶片薄嫩，焯水后柔软，汁水丰富',crowd:[{name:'全人群',level:'推荐'},{name:'老年人',level:'推荐'},{name:'婴幼儿',level:'适量'}],cook:'婴幼儿建议打泥处理，去除纤维'}},
|
||||
{name:'鸡蛋',code:'0401001',alias:'鸡蛋',firstClass:'蛋类',secondClass:'鸡蛋',icon:'🥚',edible:'88',waterRate:'74.1',dataSource:0,
|
||||
nutri:{calorie:144,protein:13.3,fat:8.8,carbohydrate:2.8,dietary_fiber:0,
|
||||
vitamin_a:234,vitamin_b1:0.11,vitamin_b2:0.27,vitamin_b6:0.11,vitamin_b12:1.0,vitamin_c:0,vitamin_d:2.2,vitamin_e:1.06,vitamin_k:0,niacin:0.2,folic_acid:70,biotin:20,pantothenic_acid:1.3,total_choline:294,
|
||||
ca:56,phosphorus:195,kalium:154,mg:10,na:131.5,fe:2.0,zn:1.1,se:14.34,cu:0.15,mn:0.04,iodine:27.2,
|
||||
cholesterol:585,sfa:2.6,mufa:3.5,pufa:1.4,dha:0,
|
||||
ile:680,leu:1090,tyr:500,lys:910,met:400,phe:680,thr:610,trp:170,val:770,met_cys:650,phe_tyr:1180,cys:250,
|
||||
gi:0,purine:3.7,guanine:0.8,adenine:1.2,hypoxanthine:1.1,xanthine:0.6},
|
||||
color:{main:'米黄色',desc:'蛋黄橙黄，蛋白透明，整体色泽亮',cause:'蛋黄富含类胡萝卜素',grade:'优',crowd:[{name:'成人',level:'推荐'},{name:'儿童',level:'推荐'},{name:'高血脂人群',level:'慎食'}],note:'高血脂人群每日不超过1个'},
|
||||
taste:{main:'鲜味',sub:'淡味',intensity:'中',desc:'蛋黄浓郁，蛋白清淡，整体鲜香',crowd:[{name:'成人',level:'推荐'},{name:'儿童',level:'推荐'}],note:'优质蛋白，味道适中'},
|
||||
texture:{main:'嫩滑',chew:'易',digest:'易',desc:'水煮蛋弹嫩，炒蛋软嫩，蒸蛋细腻',crowd:[{name:'全人群',level:'推荐'},{name:'婴幼儿',level:'推荐'},{name:'老年人',level:'推荐'}],cook:'蒸蛋口感最软，适合各年龄段'}},
|
||||
{name:'豆腐(北)',code:'0601001',alias:'北豆腐',firstClass:'豆及豆制品',secondClass:'豆制品',icon:'🧈',edible:'100',waterRate:'82.8',dataSource:0,
|
||||
nutri:{calorie:98,protein:12.2,fat:4.8,carbohydrate:1.5,dietary_fiber:0.4,
|
||||
vitamin_a:0,vitamin_b1:0.07,vitamin_b2:0.04,vitamin_b6:0.05,vitamin_b12:0,vitamin_c:0,vitamin_d:0,vitamin_e:2.71,vitamin_k:0,niacin:0.1,folic_acid:37,biotin:0,pantothenic_acid:0.1,total_choline:0,
|
||||
ca:138,phosphorus:97,kalium:106,mg:63,na:7.2,fe:2.5,zn:1.11,se:2.3,cu:0.27,mn:0.47,iodine:0,
|
||||
cholesterol:0,sfa:0.7,mufa:1.1,pufa:2.7,dha:0,
|
||||
ile:580,leu:940,tyr:430,lys:760,met:150,phe:600,thr:470,trp:160,val:580,met_cys:310,phe_tyr:1030,cys:160,
|
||||
gi:32,purine:68.6,guanine:15.2,adenine:22.1,hypoxanthine:24.8,xanthine:6.5},
|
||||
color:{main:'乳白色',desc:'洁白细腻，质地均匀，有光泽',cause:'大豆蛋白凝固，含水量高',grade:'优',crowd:[{name:'全人群',level:'推荐'},{name:'高血压人群',level:'推荐'}],note:'低脂优质蛋白，适合多数人群'},
|
||||
taste:{main:'淡味',sub:'豆香',intensity:'弱',desc:'清淡豆香，口感温和，无刺激性',crowd:[{name:'全人群',level:'推荐'},{name:'痛风人群',level:'适量'}],note:'痛风急性期适量，嘌呤含量偏高'},
|
||||
texture:{main:'细腻',chew:'易',digest:'易',desc:'质地细腻滑嫩，入口即化，无渣感',crowd:[{name:'全人群',level:'推荐'},{name:'老年人',level:'推荐'},{name:'术后恢复',level:'推荐'}],cook:'细腻易消化，适合消化功能弱者'}}
|
||||
];
|
||||
|
||||
let currentFood = 0;
|
||||
let currentTab = 0;
|
||||
|
||||
function selectFood(idx){
|
||||
currentFood = idx;
|
||||
document.querySelectorAll('.food-item').forEach((el,i)=>el.classList.toggle('active',i===idx));
|
||||
const f = FOODS[idx];
|
||||
document.getElementById('detail-food-name').textContent = f.name;
|
||||
document.getElementById('detail-food-code').textContent = f.code;
|
||||
document.getElementById('detail-food-category').textContent = f.firstClass + ' / ' + f.secondClass;
|
||||
renderDetail();
|
||||
}
|
||||
|
||||
function switchDetailTab(idx){
|
||||
currentTab = idx;
|
||||
document.querySelectorAll('.detail-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
renderDetail();
|
||||
}
|
||||
|
||||
function levelTag(level){
|
||||
const map = {'推荐':'tag-green','适量':'tag-orange','慎食':'tag-red'};
|
||||
return `<span class="tag ${map[level]||'tag-gray'}">${level}</span>`;
|
||||
}
|
||||
|
||||
function renderDetail(){
|
||||
const f = FOODS[currentFood];
|
||||
const body = document.getElementById('detail-body');
|
||||
if(currentTab===0) body.innerHTML = renderNutri(f);
|
||||
else if(currentTab===1) body.innerHTML = renderColor(f);
|
||||
else if(currentTab===2) body.innerHTML = renderTaste(f);
|
||||
else body.innerHTML = renderTexture(f);
|
||||
}
|
||||
|
||||
function renderNutri(f){
|
||||
const n = f.nutri;
|
||||
const sourceLabel = f.dataSource===0?'系统内置':'手动添加';
|
||||
// 基础信息
|
||||
let html = `<div class="profile-section"><div class="profile-section__title">基础信息</div><div class="profile-fields">`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">别名</div><div class="profile-field__value">${f.alias}</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">一级分类</div><div class="profile-field__value">${f.firstClass}</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">二级分类</div><div class="profile-field__value">${f.secondClass}</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">可食部分</div><div class="profile-field__value">${f.edible}%</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">水分</div><div class="profile-field__value">${f.waterRate}%</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">数据来源</div><div class="profile-field__value">${sourceLabel}</div></div>`;
|
||||
html += `</div></div>`;
|
||||
// 宏量营养素
|
||||
html += renderNutriGroup('宏量营养素', [
|
||||
{label:'能量',value:n.calorie,unit:'kcal'},{label:'蛋白质',value:n.protein,unit:'g'},
|
||||
{label:'脂肪',value:n.fat,unit:'g'},{label:'碳水化合物',value:n.carbohydrate,unit:'g'},
|
||||
{label:'膳食纤维',value:n.dietary_fiber,unit:'g'}
|
||||
]);
|
||||
// 维生素
|
||||
html += renderNutriGroup('维生素', [
|
||||
{label:'维生素A',value:n.vitamin_a,unit:'μg RAE'},{label:'硫胺素(B1)',value:n.vitamin_b1,unit:'mg'},
|
||||
{label:'核黄素(B2)',value:n.vitamin_b2,unit:'mg'},{label:'维生素B6',value:n.vitamin_b6,unit:'mg'},
|
||||
{label:'维生素B12',value:n.vitamin_b12,unit:'μg'},{label:'维生素C',value:n.vitamin_c,unit:'mg'},
|
||||
{label:'维生素D',value:n.vitamin_d,unit:'μg'},{label:'维生素E',value:n.vitamin_e,unit:'mg α-TE'},
|
||||
{label:'维生素K',value:n.vitamin_k,unit:'μg'},{label:'烟酸',value:n.niacin,unit:'mg'},
|
||||
{label:'叶酸',value:n.folic_acid,unit:'μg'},{label:'生物素',value:n.biotin,unit:'μg'},
|
||||
{label:'泛酸',value:n.pantothenic_acid,unit:'mg'},{label:'总胆碱',value:n.total_choline,unit:'mg'}
|
||||
]);
|
||||
// 矿物质
|
||||
html += renderNutriGroup('矿物质', [
|
||||
{label:'钙',value:n.ca,unit:'mg'},{label:'磷',value:n.phosphorus,unit:'mg'},
|
||||
{label:'钾',value:n.kalium,unit:'mg'},{label:'镁',value:n.mg,unit:'mg'},
|
||||
{label:'钠',value:n.na,unit:'mg'},{label:'铁',value:n.fe,unit:'mg'},
|
||||
{label:'锌',value:n.zn,unit:'mg'},{label:'硒',value:n.se,unit:'μg'},
|
||||
{label:'铜',value:n.cu,unit:'mg'},{label:'锰',value:n.mn,unit:'mg'},
|
||||
{label:'碘',value:n.iodine,unit:'μg'}
|
||||
]);
|
||||
// 脂质指标
|
||||
html += renderNutriGroup('脂质指标', [
|
||||
{label:'胆固醇',value:n.cholesterol,unit:'mg'},{label:'饱和脂肪酸',value:n.sfa,unit:'g'},
|
||||
{label:'单不饱和脂肪酸',value:n.mufa,unit:'g'},{label:'多不饱和脂肪酸',value:n.pufa,unit:'g'},
|
||||
{label:'DHA',value:n.dha,unit:'mg'}
|
||||
]);
|
||||
// 氨基酸
|
||||
html += renderNutriGroup('氨基酸', [
|
||||
{label:'异亮氨酸',value:n.ile,unit:'mg'},{label:'亮氨酸',value:n.leu,unit:'mg'},
|
||||
{label:'酪氨酸',value:n.tyr,unit:'mg'},{label:'赖氨酸',value:n.lys,unit:'mg'},
|
||||
{label:'蛋氨酸',value:n.met,unit:'mg'},{label:'苯丙氨酸',value:n.phe,unit:'mg'},
|
||||
{label:'苏氨酸',value:n.thr,unit:'mg'},{label:'色氨酸',value:n.trp,unit:'mg'},
|
||||
{label:'缬氨酸',value:n.val,unit:'mg'},{label:'蛋氨酸+胱氨酸',value:n.met_cys,unit:'mg'},
|
||||
{label:'苯丙氨酸+酪氨酸',value:n.phe_tyr,unit:'mg'},{label:'胱氨酸',value:n.cys,unit:'mg'}
|
||||
]);
|
||||
// 特殊指标
|
||||
html += renderNutriGroup('特殊指标', [
|
||||
{label:'GI',value:n.gi,unit:''},{label:'总嘌呤',value:n.purine,unit:'mg'},
|
||||
{label:'鸟嘌呤',value:n.guanine,unit:'mg'},{label:'腺嘌呤',value:n.adenine,unit:'mg'},
|
||||
{label:'次黄嘌呤',value:n.hypoxanthine,unit:'mg'},{label:'黄嘌呤',value:n.xanthine,unit:'mg'}
|
||||
]);
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderNutriGroup(title, cells){
|
||||
let html = `<div class="profile-section"><div class="profile-section__title">${title}</div><div class="nutri-grid">`;
|
||||
cells.forEach(c=>{
|
||||
const val = (c.value===0||c.value==='0')?'—':c.value;
|
||||
html+=`<div class="nutri-cell"><div class="nutri-cell__label">${c.label}</div><div class="nutri-cell__value">${val}<span class="nutri-cell__unit">${c.unit}</span></div></div>`;
|
||||
});
|
||||
html += `</div></div>`;
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderColor(f){
|
||||
const c = f.color;
|
||||
let html = `<div class="profile-section"><div class="profile-section__title">色泽信息</div><div class="profile-fields">`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">主色系</div><div class="profile-field__value">${c.main}</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">感官评级</div><div class="profile-field__value">${c.grade}</div></div>`;
|
||||
html += `<div class="profile-field profile-field--full"><div class="profile-field__label">色泽描述</div><div class="profile-field__value">${c.desc}</div></div>`;
|
||||
html += `<div class="profile-field profile-field--full"><div class="profile-field__label">色泽成因</div><div class="profile-field__value">${c.cause}</div></div>`;
|
||||
html += `</div></div>`;
|
||||
html += renderCrowd(c.crowd, c.note);
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderTaste(f){
|
||||
const t = f.taste;
|
||||
let html = `<div class="profile-section"><div class="profile-section__title">味道信息</div><div class="profile-fields">`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">主味型</div><div class="profile-field__value">${t.main}</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">辅味型</div><div class="profile-field__value">${t.sub}</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">味道强度</div><div class="profile-field__value">${t.intensity}</div></div>`;
|
||||
html += `<div class="profile-field profile-field--full"><div class="profile-field__label">味道描述</div><div class="profile-field__value">${t.desc}</div></div>`;
|
||||
html += `</div></div>`;
|
||||
html += renderCrowd(t.crowd, t.note);
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderTexture(f){
|
||||
const t = f.texture;
|
||||
let html = `<div class="profile-section"><div class="profile-section__title">口感信息</div><div class="profile-fields">`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">主质地</div><div class="profile-field__value">${t.main}</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">咀嚼难度</div><div class="profile-field__value">${t.chew}</div></div>`;
|
||||
html += `<div class="profile-field"><div class="profile-field__label">消化难度</div><div class="profile-field__value">${t.digest}</div></div>`;
|
||||
html += `<div class="profile-field profile-field--full"><div class="profile-field__label">口感描述</div><div class="profile-field__value">${t.desc}</div></div>`;
|
||||
html += `<div class="profile-field profile-field--full"><div class="profile-field__label">烹饪建议</div><div class="profile-field__value">${t.cook}</div></div>`;
|
||||
html += `</div></div>`;
|
||||
html += renderCrowd(t.crowd, '');
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderCrowd(crowd, note){
|
||||
let html = `<div class="profile-section"><div class="profile-section__title">适配人群</div><div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;">`;
|
||||
crowd.forEach(c=>{html+=`<div style="display:flex;align-items:center;gap:4px;">${levelTag(c.level)}<span style="font-size:var(--font-sm);">${c.name}</span></div>`;});
|
||||
html += `</div>`;
|
||||
if(note && note!=='—') html += `<div style="font-size:var(--font-sm);color:var(--text-secondary);background:#FFFBE6;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid #FFE58F;">⚠️ ${note}</div>`;
|
||||
html += `</div>`;
|
||||
return html;
|
||||
}
|
||||
|
||||
// 初始化
|
||||
renderDetail();
|
||||
|
||||
// 侧边栏子组展开/收起
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,333 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>营养管理 - 新增检验 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 设计令牌 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb .sep{color:var(--text-placeholder);}
|
||||
|
||||
/* 表单容器 */
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:20px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;margin-bottom:16px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-group label{font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;}
|
||||
.form-group label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;transition:border-color .2s;width:100%;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;width:100%;transition:border-color .2s;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;min-height:80px;width:100%;transition:border-color .2s;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
|
||||
/* 检验类型Tab */
|
||||
.inspect-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border);}
|
||||
.inspect-tab{padding:10px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;}
|
||||
.inspect-tab:hover{color:var(--primary);}
|
||||
.inspect-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.inspect-panel{display:none;}
|
||||
.inspect-panel.active{display:block;}
|
||||
|
||||
/* 指标输入网格 */
|
||||
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.metric-item{display:flex;flex-direction:column;gap:6px;}
|
||||
.metric-item label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.metric-item .form-input{height:34px;}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.form-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#73d13d;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item active"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍲</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🛒</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">🧑</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">⚖️</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🍽️</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="prod-qc-nutrition.html">营养检验</a>
|
||||
<span class="sep">/</span>
|
||||
<span>新增检验</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>检验单号</label>
|
||||
<input class="form-input" type="text" value="NUT-N004" readonly style="background:#F5F7FA;color:var(--text-secondary);">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>检验菜品<span class="required">*</span></label>
|
||||
<select class="form-select" id="dishSelect">
|
||||
<option value="">请选择菜品</option>
|
||||
<option value="DISH001">红烧肉 (DISH001)</option>
|
||||
<option value="DISH002">清炒时蔬 (DISH002)</option>
|
||||
<option value="DISH003">番茄鸡蛋汤 (DISH003)</option>
|
||||
<option value="DISH004">宫保鸡丁 (DISH004)</option>
|
||||
<option value="DISH005">蒜蓉西兰花 (DISH005)</option>
|
||||
<option value="DISH006">糖醋排骨 (DISH006)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>检验时间<span class="required">*</span></label>
|
||||
<input class="form-input" type="datetime-local" id="inspectTime">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>检验人员<span class="required">*</span></label>
|
||||
<select class="form-select">
|
||||
<option value="">请选择检验人员</option>
|
||||
<option value="1">张营养师</option>
|
||||
<option value="2">李检验员</option>
|
||||
<option value="3">王质检员</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>检验批次</label>
|
||||
<input class="form-input" type="text" placeholder="如：第3批次">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>样品来源</label>
|
||||
<select class="form-select">
|
||||
<option value="">请选择</option>
|
||||
<option value="line1">一号餐线</option>
|
||||
<option value="line2">二号餐线</option>
|
||||
<option value="line3">三号餐线</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 检验数据 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">检验数据</div>
|
||||
<!-- 检验类型Tab -->
|
||||
<div class="inspect-tabs">
|
||||
<div class="inspect-tab active" onclick="switchTab(0)">🥗 营养检验</div>
|
||||
<div class="inspect-tab" onclick="switchTab(1)">👅 味道检验</div>
|
||||
<div class="inspect-tab" onclick="switchTab(2)">🍴 口感检验</div>
|
||||
<div class="inspect-tab" onclick="switchTab(3)">🎨 色泽检验</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养检验面板 -->
|
||||
<div class="inspect-panel active" id="panel0">
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item"><label>热量 (kcal/100g)<span class="required">*</span></label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>蛋白质 (g)<span class="required">*</span></label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>碳水化合物 (g)<span class="required">*</span></label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>脂肪 (g)<span class="required">*</span></label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>维生素C (mg)</label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>矿物质 (mg)</label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>膳食纤维 (g)</label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>钠 (mg)</label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
</div>
|
||||
<div class="form-group" style="max-width:50%;">
|
||||
<label>微量元素备注</label>
|
||||
<textarea class="form-textarea" placeholder="如：铁2.4mg、锌1.8mg..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 味道检验面板 -->
|
||||
<div class="inspect-panel" id="panel1">
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item"><label>酸度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>甜度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>苦度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>辣度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>咸度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>气味评分 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" step="0.1" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>综合风味评分 (1-5)</label><input class="form-input" type="number" min="1" max="5" step="0.1" placeholder="自动计算" readonly style="background:#F5F7FA;"></div>
|
||||
<div class="metric-item"><label>综合评级</label><input class="form-input" type="text" placeholder="自动评定" readonly style="background:#F5F7FA;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 口感检验面板 -->
|
||||
<div class="inspect-panel" id="panel2">
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item"><label>软硬度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>黏糯度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>酥脆度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>嫩滑度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>弹性 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>综合口感评分 (1-5)</label><input class="form-input" type="number" placeholder="自动计算" readonly style="background:#F5F7FA;"></div>
|
||||
<div class="metric-item"><label>综合评级</label><input class="form-input" type="text" placeholder="自动评定" readonly style="background:#F5F7FA;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 色泽检验面板 -->
|
||||
<div class="inspect-panel" id="panel3">
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item"><label>主色调<span class="required">*</span></label><input class="form-input" type="text" placeholder="如：深红褐色"></div>
|
||||
<div class="metric-item"><label>色泽均匀度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>光泽度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>新鲜度 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>卖相评分 (1-5)<span class="required">*</span></label><input class="form-input" type="number" min="1" max="5" placeholder="1-5"></div>
|
||||
<div class="metric-item"><label>综合色泽评分 (1-5)</label><input class="form-input" type="number" placeholder="自动计算" readonly style="background:#F5F7FA;"></div>
|
||||
<div class="metric-item"><label>综合评级</label><input class="form-input" type="text" placeholder="自动评定" readonly style="background:#F5F7FA;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 附件与备注 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">附件与备注</div>
|
||||
<div class="form-row" style="grid-template-columns:1fr 1fr;">
|
||||
<div class="form-group">
|
||||
<label>检验视频</label>
|
||||
<div style="border:2px dashed var(--border);border-radius:var(--radius-sm);padding:24px;text-align:center;color:var(--text-placeholder);font-size:var(--font-sm);cursor:pointer;transition:border-color .2s;" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='var(--border)'">
|
||||
📹 点击或拖拽上传检验视频<br><span style="font-size:var(--font-xs);margin-top:4px;display:inline-block;">支持 MP4/MOV，最大 200MB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>检验图片</label>
|
||||
<div style="border:2px dashed var(--border);border-radius:var(--radius-sm);padding:24px;text-align:center;color:var(--text-placeholder);font-size:var(--font-sm);cursor:pointer;transition:border-color .2s;" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='var(--border)'">
|
||||
📷 点击或拖拽上传检验图片<br><span style="font-size:var(--font-xs);margin-top:4px;display:inline-block;">支持 JPG/PNG，最大 10MB，最多5张</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-top:12px;">
|
||||
<label>备注说明</label>
|
||||
<textarea class="form-textarea" placeholder="填写检验过程中的特殊情况或补充说明..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="form-footer">
|
||||
<a href="prod-qc-nutrition.html" class="btn btn-default">取消</a>
|
||||
<button class="btn btn-default" onclick="alert('草稿已保存')">💾 保存草稿</button>
|
||||
<button class="btn btn-success" onclick="alert('检验数据已提交')">✅ 提交检验</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交互脚本 -->
|
||||
<script>
|
||||
// 检验类型Tab切换
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.inspect-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.inspect-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
}
|
||||
|
||||
// 侧边栏折叠
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
// 初始化检验时间为当前时间
|
||||
(function(){
|
||||
var now=new Date();
|
||||
var pad=function(n){return n<10?'0'+n:n;};
|
||||
var dt=now.getFullYear()+'-'+pad(now.getMonth()+1)+'-'+pad(now.getDate())+'T'+pad(now.getHours())+':'+pad(now.getMinutes());
|
||||
document.getElementById('inspectTime').value=dt;
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -15,8 +15,6 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
@@ -35,7 +33,6 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
@@ -45,7 +42,6 @@ ${CSS_RULE}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
|
||||
@@ -57,50 +53,75 @@ ${CSS_RULE}
|
||||
.stat-card__info{display:flex;flex-direction:column;gap:4px;}
|
||||
.stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);margin-right:4px;}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
|
||||
/* 左右分栏布局 */
|
||||
.master-detail{display:flex;gap:16px;height:calc(100vh - 56px - 24px - 24px - 100px);}
|
||||
.panel-left{width:380px;flex-shrink:0;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.panel-right{flex:1;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;}
|
||||
.panel-left__header{padding:16px 20px 12px;border-bottom:1px solid var(--border);}
|
||||
.panel-left__title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
|
||||
.panel-left__search{display:flex;gap:8px;margin-bottom:10px;}
|
||||
.panel-left__search input{flex:1;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);outline:none;}
|
||||
.panel-left__search input:focus{border-color:var(--primary);}
|
||||
.panel-left__filter{display:flex;gap:8px;}
|
||||
.panel-left__filter select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 10px;font-size:var(--font-xs);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;cursor:pointer;flex:1;}
|
||||
.panel-left__actions{display:flex;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border);}
|
||||
.panel-left__actions .btn{height:30px;font-size:var(--font-xs);padding:0 10px;}
|
||||
.food-list{flex:1;overflow-y:auto;padding:4px 0;}
|
||||
.food-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;}
|
||||
.food-item:hover{background:#F8FBFF;}
|
||||
.food-item.active{background:var(--primary-light);border-left-color:var(--primary);}
|
||||
.food-item__icon{width:36px;height:36px;border-radius:var(--radius-sm);background:#F5F7FA;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
|
||||
.food-item__info{flex:1;min-width:0;}
|
||||
.food-item__name{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.food-item__meta{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:2px;display:flex;gap:8px;}
|
||||
.panel-left__footer{padding:10px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
|
||||
.panel-left__footer span{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.page-btn{width:26px;height:26px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-xs);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
|
||||
/* Tab 切换 */
|
||||
.page-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);border-bottom:2px solid var(--border);}
|
||||
.page-tab{padding:14px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;display:flex;align-items:center;gap:6px;}
|
||||
.page-tab:hover{color:var(--primary);}
|
||||
.page-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
/* 右侧详情面板 */
|
||||
.panel-right__header{padding:16px 24px 0;border-bottom:1px solid var(--border);}
|
||||
.panel-right__food-title{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
|
||||
.panel-right__food-title h2{font-size:var(--font-lg);font-weight:600;}
|
||||
.panel-right__food-title .code{font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
.panel-right__food-title .tag{margin-left:4px;}
|
||||
.detail-tabs{display:flex;gap:0;}
|
||||
.detail-tab{padding:10px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;display:flex;align-items:center;gap:5px;}
|
||||
.detail-tab:hover{color:var(--primary);}
|
||||
.detail-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.panel-right__body{flex:1;overflow-y:auto;padding:20px 24px;}
|
||||
.detail-panel{display:none;}
|
||||
.detail-panel.active{display:block;}
|
||||
|
||||
/* 检验数据网格 */
|
||||
.inspect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
|
||||
.inspect-cell{background:#FAFBFC;border-radius:var(--radius-sm);padding:14px 16px;border:1px solid #F0F0F0;}
|
||||
.inspect-cell__label{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:4px;}
|
||||
.inspect-cell__value{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.inspect-cell__unit{font-size:var(--font-xs);color:var(--text-secondary);margin-left:2px;font-weight:400;}
|
||||
|
||||
/* 检验记录表格 */
|
||||
.inspect-section{margin-bottom:20px;}
|
||||
.inspect-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #F0F0F0;display:flex;align-items:center;justify-content:space-between;}
|
||||
.inspect-table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
.inspect-table th{background:#FAFAFA;padding:10px 12px;text-align:left;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
.inspect-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text-primary);}
|
||||
.inspect-table tr:last-child td{border-bottom:none;}
|
||||
.inspect-table tr:hover{background:#F8FBFF;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
@@ -164,208 +185,302 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🔬</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">48</div>
|
||||
<div class="stat-card__label">本月检验批次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">✅</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">44</div>
|
||||
<div class="stat-card__label">达标/优秀</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">⚠️</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">4</div>
|
||||
<div class="stat-card__label">偏差/待改进</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🔄</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">6条</div>
|
||||
<div class="stat-card__label">待同步均值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🔬</div><div class="stat-card__info"><div class="stat-card__value">48</div><div class="stat-card__label">本月检验批次</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">✅</div><div class="stat-card__info"><div class="stat-card__value">44</div><div class="stat-card__label">达标/优秀</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon orange">⚠️</div><div class="stat-card__info"><div class="stat-card__value">4</div><div class="stat-card__label">偏差/待改进</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🔄</div><div class="stat-card__info"><div class="stat-card__value">6条</div><div class="stat-card__label">待同步均值</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换栏 -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(0)">🥗 营养检验</div>
|
||||
<div class="page-tab" onclick="switchTab(1)">👅 味道检验</div>
|
||||
<div class="page-tab" onclick="switchTab(2)">🍴 口感检验</div>
|
||||
<div class="page-tab" onclick="switchTab(3)">🎨 色泽检验</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 营养检验 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>菜品名称</label><input class="filter-input" type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="filter-item"><label>检验结果</label><select class="filter-select"><option>全部</option><option>达标</option><option>偏差</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<!-- 左右分栏 -->
|
||||
<div class="master-detail">
|
||||
<!-- 左侧：菜品列表 -->
|
||||
<div class="panel-left">
|
||||
<div class="panel-left__header">
|
||||
<div class="panel-left__title">菜品列表</div>
|
||||
<div class="panel-left__search">
|
||||
<input type="text" placeholder="搜索菜品名称...">
|
||||
<button class="btn btn-primary" style="height:32px;padding:0 12px;font-size:var(--font-xs);">搜索</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-left__actions">
|
||||
<a href="prod-qc-nutrition-add.html" class="btn btn-primary">➕ 新增检验</a>
|
||||
</div>
|
||||
<div class="food-list" id="dishList"></div>
|
||||
<div class="panel-left__footer">
|
||||
<span>共 48 条</span>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary">➕ 新增检验</button> <button class="btn btn-default">🔄 同步均值→餐品库</button> <button class="btn btn-default">📊 同步均值→食物成分库</button></div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">营养检验</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>检验单号</th><th>菜品名称</th><th>检验时间</th><th>热量(kcal/100g)</th><th>蛋白质(g)</th><th>碳水(g)</th><th>脂肪(g)</th><th>维生素C(mg)</th><th>矿物质(mg)</th><th>微量元素备注</th><th>检验结果</th><th>均值同步状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-N001</td><td>红烧肉</td><td>2026-04-22 14:30</td><td>295</td><td>14.2</td><td>8.6</td><td>22.1</td><td>0.8</td><td>86</td><td>铁2.4mg</td><td><span class="tag tag-green">达标</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-N002</td><td>清炒时蔬</td><td>2026-04-22 14:35</td><td>42</td><td>2.1</td><td>5.8</td><td>1.2</td><td>18.6</td><td>42</td><td>钾220mg</td><td><span class="tag tag-orange">偏差</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-N003</td><td>番茄鸡蛋汤</td><td>2026-04-22 14:40</td><td>38</td><td>3.2</td><td>3.4</td><td>1.8</td><td>12.4</td><td>54</td><td>—</td><td><span class="tag tag-green">达标</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-N004</td><td>宫保鸡丁</td><td>2026-04-21 15:00</td><td>186</td><td>18.2</td><td>8.1</td><td>9.4</td><td>2.1</td><td>94</td><td>锌1.8mg</td><td><span class="tag tag-green">达标</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
|
||||
<!-- 右侧：检验详情 -->
|
||||
<div class="panel-right">
|
||||
<div class="panel-right__header">
|
||||
<div class="panel-right__food-title">
|
||||
<h2 id="detailName">红烧肉</h2>
|
||||
<span class="code" id="detailCode">DISH001</span>
|
||||
<span class="tag tag-green" id="detailResult">达标</span>
|
||||
</div>
|
||||
<div class="detail-tabs">
|
||||
<div class="detail-tab active" onclick="switchDetailTab(0)">🥗 营养检验</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(1)">👅 味道检验</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(2)">🍴 口感检验</div>
|
||||
<div class="detail-tab" onclick="switchDetailTab(3)">🎨 色泽检验</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-right__body" id="detailBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 味道检验 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>菜品名称</label><input class="filter-input" type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="filter-item"><label>综合评级</label><select class="filter-select"><option>全部</option><option>优秀</option><option>良好</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary">➕ 新增检验</button> <button class="btn btn-default">🔄 同步均值→餐品库</button></div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">味道检验</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>检验单号</th><th>菜品名称</th><th>检验时间</th><th>酸度(1-5)</th><th>甜度(1-5)</th><th>苦度(1-5)</th><th>辣度(1-5)</th><th>咸度(1-5)</th><th>气味评分(1-5)</th><th>综合风味评分</th><th>综合评级</th><th>均值同步状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-T001</td><td>红烧肉</td><td>2026-04-22 14:32</td><td>1</td><td>3</td><td>1</td><td>1</td><td>4</td><td>4.2</td><td>4.0</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-T002</td><td>清炒时蔬</td><td>2026-04-22 14:37</td><td>1</td><td>1</td><td>1</td><td>1</td><td>2</td><td>3.8</td><td>3.5</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-T003</td><td>番茄鸡蛋汤</td><td>2026-04-22 14:42</td><td>2</td><td>2</td><td>1</td><td>1</td><td>3</td><td>4.0</td><td>3.8</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-T004</td><td>宫保鸡丁</td><td>2026-04-21 15:05</td><td>1</td><td>2</td><td>1</td><td>4</td><td>3</td><td>4.5</td><td>4.2</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 口感检验 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>菜品名称</label><input class="filter-input" type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="filter-item"><label>综合评级</label><select class="filter-select"><option>全部</option><option>优秀</option><option>良好</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary">➕ 新增检验</button> <button class="btn btn-default">🔄 同步均值→餐品库</button></div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">口感检验</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>检验单号</th><th>菜品名称</th><th>检验时间</th><th>软硬度(1-5)</th><th>黏糯度(1-5)</th><th>酥脆度(1-5)</th><th>嫩滑度(1-5)</th><th>弹性(1-5)</th><th>综合口感评分</th><th>综合评级</th><th>均值同步状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-K001</td><td>红烧肉</td><td>2026-04-22 14:34</td><td>4</td><td>3</td><td>1</td><td>4</td><td>3</td><td>3.8</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-K002</td><td>清炒时蔬</td><td>2026-04-22 14:38</td><td>3</td><td>1</td><td>3</td><td>3</td><td>2</td><td>3.2</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-K003</td><td>番茄鸡蛋汤</td><td>2026-04-22 14:44</td><td>2</td><td>2</td><td>1</td><td>4</td><td>2</td><td>3.5</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-K004</td><td>宫保鸡丁</td><td>2026-04-21 15:08</td><td>3</td><td>2</td><td>3</td><td>4</td><td>3</td><td>4.0</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 色泽检验 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>菜品名称</label><input class="filter-input" type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="filter-item"><label>综合评级</label><select class="filter-select"><option>全部</option><option>优秀</option><option>良好</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary">➕ 新增检验</button> <button class="btn btn-default">🔄 同步均值→餐品库</button></div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">色泽检验</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>检验单号</th><th>菜品名称</th><th>检验时间</th><th>主色调</th><th>色泽均匀度(1-5)</th><th>光泽度(1-5)</th><th>新鲜度(1-5)</th><th>卖相评分(1-5)</th><th>综合色泽评分</th><th>综合评级</th><th>均值同步状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-C001</td><td>红烧肉</td><td>2026-04-22 14:36</td><td>深红褐色</td><td>4</td><td>3</td><td>4</td><td>4</td><td>3.8</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-C002</td><td>清炒时蔬</td><td>2026-04-22 14:39</td><td>翠绿色</td><td>5</td><td>4</td><td>5</td><td>5</td><td>4.8</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-C003</td><td>番茄鸡蛋汤</td><td>2026-04-22 14:45</td><td>橙红色</td><td>4</td><td>3</td><td>4</td><td>4</td><td>3.8</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-C004</td><td>宫保鸡丁</td><td>2026-04-21 15:10</td><td>红棕色</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4.0</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 交互脚本 -->
|
||||
<script>
|
||||
// 折叠/展开子分组
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若当前激活项在子分组内，展开其父分组
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
// Tab 切换
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach(function(t,i){t.classList.toggle('active',i===idx);});
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p,i){p.classList.toggle('active',i===idx);});
|
||||
// 菜品检验数据
|
||||
const DISHES = [
|
||||
{id:'DISH001',name:'红烧肉',icon:'🥩',result:'达标',sync:'已同步',time:'2026-04-22 14:30',
|
||||
nutri:{calorie:295,protein:14.2,carb:8.6,fat:22.1,vitC:0.8,mineral:86,note:'铁2.4mg'},
|
||||
taste:{sour:1,sweet:3,bitter:1,spicy:1,salty:4,smell:4.2,overall:4.0,grade:'优秀'},
|
||||
texture:{hardness:4,sticky:3,crispy:1,smooth:4,elastic:3,overall:3.8,grade:'良好'},
|
||||
color:{hue:'深红褐色',uniform:4,gloss:3,fresh:4,look:4,overall:3.8,grade:'良好'}
|
||||
},
|
||||
{id:'DISH002',name:'清炒时蔬',icon:'🥬',result:'偏差',sync:'待同步',time:'2026-04-22 14:35',
|
||||
nutri:{calorie:42,protein:2.1,carb:5.8,fat:1.2,vitC:18.6,mineral:42,note:'钾220mg'},
|
||||
taste:{sour:1,sweet:1,bitter:1,spicy:1,salty:2,smell:3.8,overall:3.5,grade:'良好'},
|
||||
texture:{hardness:3,sticky:1,crispy:3,smooth:3,elastic:2,overall:3.2,grade:'良好'},
|
||||
color:{hue:'翠绿色',uniform:5,gloss:4,fresh:5,look:5,overall:4.8,grade:'优秀'}
|
||||
},
|
||||
{id:'DISH003',name:'番茄鸡蛋汤',icon:'🍅',result:'达标',sync:'已同步',time:'2026-04-22 14:40',
|
||||
nutri:{calorie:38,protein:3.2,carb:3.4,fat:1.8,vitC:12.4,mineral:54,note:'—'},
|
||||
taste:{sour:2,sweet:2,bitter:1,spicy:1,salty:3,smell:4.0,overall:3.8,grade:'良好'},
|
||||
texture:{hardness:2,sticky:2,crispy:1,smooth:4,elastic:2,overall:3.5,grade:'良好'},
|
||||
color:{hue:'橙红色',uniform:4,gloss:3,fresh:4,look:4,overall:3.8,grade:'良好'}
|
||||
},
|
||||
{id:'DISH004',name:'宫保鸡丁',icon:'🍗',result:'达标',sync:'待同步',time:'2026-04-21 15:00',
|
||||
nutri:{calorie:186,protein:18.2,carb:8.1,fat:9.4,vitC:2.1,mineral:94,note:'锌1.8mg'},
|
||||
taste:{sour:1,sweet:2,bitter:1,spicy:4,salty:3,smell:4.5,overall:4.2,grade:'优秀'},
|
||||
texture:{hardness:3,sticky:2,crispy:3,smooth:4,elastic:3,overall:4.0,grade:'优秀'},
|
||||
color:{hue:'红棕色',uniform:4,gloss:4,fresh:4,look:4,overall:4.0,grade:'优秀'}
|
||||
}
|
||||
];
|
||||
|
||||
let currentDish = 0;
|
||||
let currentTab = 0;
|
||||
|
||||
// 渲染左侧菜品列表
|
||||
function renderDishList(){
|
||||
const el = document.getElementById('dishList');
|
||||
el.innerHTML = DISHES.map((d,i)=>`
|
||||
<div class="food-item${i===currentDish?' active':''}" onclick="selectDish(${i})">
|
||||
<div class="food-item__icon">${d.icon}</div>
|
||||
<div class="food-item__info">
|
||||
<div class="food-item__name">${d.name}</div>
|
||||
<div class="food-item__meta"><span>${d.id}</span><span>${d.time.split(' ')[0]}</span><span class="tag tag-${d.result==='达标'?'green':'orange'}" style="margin:0;padding:1px 6px;">${d.result}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 选中菜品
|
||||
function selectDish(idx){
|
||||
currentDish = idx;
|
||||
renderDishList();
|
||||
renderDetail();
|
||||
}
|
||||
|
||||
// 切换详情Tab
|
||||
function switchDetailTab(idx){
|
||||
currentTab = idx;
|
||||
document.querySelectorAll('.detail-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
renderDetail();
|
||||
}
|
||||
|
||||
// 渲染右侧详情
|
||||
function renderDetail(){
|
||||
const d = DISHES[currentDish];
|
||||
document.getElementById('detailName').textContent = d.name;
|
||||
document.getElementById('detailCode').textContent = d.id;
|
||||
const resultEl = document.getElementById('detailResult');
|
||||
resultEl.textContent = d.result;
|
||||
resultEl.className = 'tag tag-'+(d.result==='达标'?'green':'orange');
|
||||
|
||||
const body = document.getElementById('detailBody');
|
||||
let html = '';
|
||||
if(currentTab===0) html = renderNutri(d);
|
||||
else if(currentTab===1) html = renderTaste(d);
|
||||
else if(currentTab===2) html = renderTexture(d);
|
||||
else html = renderColor(d);
|
||||
body.innerHTML = html;
|
||||
}
|
||||
|
||||
// 营养检验详情
|
||||
function renderNutri(d){
|
||||
const n = d.nutri;
|
||||
return `
|
||||
<div class="inspect-section">
|
||||
<div class="inspect-section__title">检验指标均值 <span style="display:inline-flex;align-items:center;gap:8px;"><button class="btn btn-default" style="height:26px;padding:0 10px;font-size:var(--font-xs);">🔄 同步均值→餐品库</button><button class="btn btn-default" style="height:26px;padding:0 10px;font-size:var(--font-xs);">📊 同步均值→食物成分库</button><span class="tag tag-blue">已同步</span></span></div>
|
||||
<div class="inspect-grid">
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">热量</div><div class="inspect-cell__value">${n.calorie}<span class="inspect-cell__unit">kcal/100g</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">蛋白质</div><div class="inspect-cell__value">${n.protein}<span class="inspect-cell__unit">g</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">碳水化合物</div><div class="inspect-cell__value">${n.carb}<span class="inspect-cell__unit">g</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">脂肪</div><div class="inspect-cell__value">${n.fat}<span class="inspect-cell__unit">g</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">维生素C</div><div class="inspect-cell__value">${n.vitC}<span class="inspect-cell__unit">mg</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">矿物质</div><div class="inspect-cell__value">${n.mineral}<span class="inspect-cell__unit">mg</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">微量元素备注</div><div class="inspect-cell__value" style="font-size:var(--font-sm);">${n.note}</div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">检验结果</div><div class="inspect-cell__value"><span class="tag tag-${d.result==='达标'?'green':'orange'}">${d.result}</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspect-section">
|
||||
<div class="inspect-section__title">历史检验记录</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:12px;align-items:center;">
|
||||
<label style="font-size:var(--font-xs);color:var(--text-secondary);">检测时间：</label>
|
||||
<input type="date" style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);">
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">至</span>
|
||||
<input type="date" style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);">
|
||||
<label style="font-size:var(--font-xs);color:var(--text-secondary);margin-left:12px;">检测状态：</label>
|
||||
<select style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 8px;font-size:var(--font-xs);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;">
|
||||
<option>全部</option><option>达标</option><option>偏差</option>
|
||||
</select>
|
||||
<button class="btn btn-primary" style="height:30px;padding:0 12px;font-size:var(--font-xs);">查询</button>
|
||||
</div>
|
||||
<table class="inspect-table">
|
||||
<thead><tr><th>检验单号</th><th>检验时间</th><th>热量</th><th>蛋白质</th><th>碳水</th><th>脂肪</th><th>维C</th><th>矿物质</th><th>结果</th><th>同步状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-N001</td><td>${d.time}</td><td>${n.calorie}</td><td>${n.protein}</td><td>${n.carb}</td><td>${n.fat}</td><td>${n.vitC}</td><td>${n.mineral}</td><td><span class="tag tag-${d.result==='达标'?'green':'orange'}">${d.result}</span></td><td><span class="tag tag-${d.sync==='已同步'?'blue':'orange'}">${d.sync}</span></td><td style="white-space:nowrap;"><span class="link" style="margin-right:6px;">食材溯源链路</span><span class="link" style="margin-right:6px;">查看视频</span><span class="link" style="margin-right:6px;">查看</span><span class="link">编辑</span></td></tr>
|
||||
<tr><td>NUT-N002</td><td>2026-04-20 10:15</td><td>${n.calorie-3}</td><td>${(n.protein-0.2).toFixed(1)}</td><td>${(n.carb+0.3).toFixed(1)}</td><td>${(n.fat-0.5).toFixed(1)}</td><td>${n.vitC}</td><td>${n.mineral-2}</td><td><span class="tag tag-green">达标</span></td><td><span class="tag tag-blue">已同步</span></td><td style="white-space:nowrap;"><span class="link" style="margin-right:6px;">食材溯源链路</span><span class="link" style="margin-right:6px;">查看视频</span><span class="link" style="margin-right:6px;">查看</span><span class="link">编辑</span></td></tr>
|
||||
<tr><td>NUT-N003</td><td>2026-04-18 09:40</td><td>${n.calorie+2}</td><td>${(n.protein+0.1).toFixed(1)}</td><td>${(n.carb-0.2).toFixed(1)}</td><td>${(n.fat+0.3).toFixed(1)}</td><td>${n.vitC}</td><td>${n.mineral+1}</td><td><span class="tag tag-green">达标</span></td><td><span class="tag tag-blue">已同步</span></td><td style="white-space:nowrap;"><span class="link" style="margin-right:6px;">食材溯源链路</span><span class="link" style="margin-right:6px;">查看视频</span><span class="link" style="margin-right:6px;">查看</span><span class="link">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// 味道检验详情
|
||||
function renderTaste(d){
|
||||
const t = d.taste;
|
||||
return `
|
||||
<div class="inspect-section">
|
||||
<div class="inspect-section__title">味道评分均值 <span style="display:inline-flex;align-items:center;gap:8px;"><button class="btn btn-default" style="height:26px;padding:0 10px;font-size:var(--font-xs);">🔄 同步均值→餐品库</button><span class="tag tag-blue">已同步</span></span></div>
|
||||
<div class="inspect-grid">
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">酸度</div><div class="inspect-cell__value">${t.sour}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">甜度</div><div class="inspect-cell__value">${t.sweet}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">苦度</div><div class="inspect-cell__value">${t.bitter}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">辣度</div><div class="inspect-cell__value">${t.spicy}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">咸度</div><div class="inspect-cell__value">${t.salty}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">气味评分</div><div class="inspect-cell__value">${t.smell}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">综合风味评分</div><div class="inspect-cell__value">${t.overall}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">综合评级</div><div class="inspect-cell__value"><span class="tag tag-${t.grade==='优秀'?'green':'blue'}">${t.grade}</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspect-section">
|
||||
<div class="inspect-section__title">历史检验记录</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:12px;align-items:center;">
|
||||
<label style="font-size:var(--font-xs);color:var(--text-secondary);">检测时间：</label>
|
||||
<input type="date" style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);">
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">至</span>
|
||||
<input type="date" style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);">
|
||||
<label style="font-size:var(--font-xs);color:var(--text-secondary);margin-left:12px;">评级：</label>
|
||||
<select style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 8px;font-size:var(--font-xs);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;">
|
||||
<option>全部</option><option>优秀</option><option>良好</option>
|
||||
</select>
|
||||
<button class="btn btn-primary" style="height:30px;padding:0 12px;font-size:var(--font-xs);">查询</button>
|
||||
</div>
|
||||
<table class="inspect-table">
|
||||
<thead><tr><th>检验单号</th><th>检验时间</th><th>酸</th><th>甜</th><th>苦</th><th>辣</th><th>咸</th><th>气味</th><th>综合</th><th>评级</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-T001</td><td>${d.time}</td><td>${t.sour}</td><td>${t.sweet}</td><td>${t.bitter}</td><td>${t.spicy}</td><td>${t.salty}</td><td>${t.smell}</td><td>${t.overall}</td><td><span class="tag tag-${t.grade==='优秀'?'green':'blue'}">${t.grade}</span></td><td style="white-space:nowrap;"><span class="link" style="margin-right:6px;">食材溯源链路</span><span class="link" style="margin-right:6px;">查看视频</span><span class="link" style="margin-right:6px;">查看</span><span class="link">编辑</span></td></tr>
|
||||
<tr><td>NUT-T002</td><td>2026-04-20 10:15</td><td>${t.sour}</td><td>${t.sweet}</td><td>${t.bitter}</td><td>${t.spicy}</td><td>${t.salty}</td><td>${(t.smell-0.1).toFixed(1)}</td><td>${(t.overall-0.2).toFixed(1)}</td><td><span class="tag tag-blue">良好</span></td><td style="white-space:nowrap;"><span class="link" style="margin-right:6px;">食材溯源链路</span><span class="link" style="margin-right:6px;">查看视频</span><span class="link" style="margin-right:6px;">查看</span><span class="link">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// 口感检验详情
|
||||
function renderTexture(d){
|
||||
const t = d.texture;
|
||||
return `
|
||||
<div class="inspect-section">
|
||||
<div class="inspect-section__title">口感评分均值 <span style="display:inline-flex;align-items:center;gap:8px;"><button class="btn btn-default" style="height:26px;padding:0 10px;font-size:var(--font-xs);">🔄 同步均值→餐品库</button><span class="tag tag-blue">已同步</span></span></div>
|
||||
<div class="inspect-grid">
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">软硬度</div><div class="inspect-cell__value">${t.hardness}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">黏糯度</div><div class="inspect-cell__value">${t.sticky}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">酥脆度</div><div class="inspect-cell__value">${t.crispy}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">嫩滑度</div><div class="inspect-cell__value">${t.smooth}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">弹性</div><div class="inspect-cell__value">${t.elastic}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">综合口感评分</div><div class="inspect-cell__value">${t.overall}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">综合评级</div><div class="inspect-cell__value"><span class="tag tag-${t.grade==='优秀'?'green':'blue'}">${t.grade}</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspect-section">
|
||||
<div class="inspect-section__title">历史检验记录</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:12px;align-items:center;">
|
||||
<label style="font-size:var(--font-xs);color:var(--text-secondary);">检测时间：</label>
|
||||
<input type="date" style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);">
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">至</span>
|
||||
<input type="date" style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);">
|
||||
<label style="font-size:var(--font-xs);color:var(--text-secondary);margin-left:12px;">评级：</label>
|
||||
<select style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 8px;font-size:var(--font-xs);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;">
|
||||
<option>全部</option><option>优秀</option><option>良好</option>
|
||||
</select>
|
||||
<button class="btn btn-primary" style="height:30px;padding:0 12px;font-size:var(--font-xs);">查询</button>
|
||||
</div>
|
||||
<table class="inspect-table">
|
||||
<thead><tr><th>检验单号</th><th>检验时间</th><th>软硬</th><th>黏糯</th><th>酥脆</th><th>嫩滑</th><th>弹性</th><th>综合</th><th>评级</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-K001</td><td>${d.time}</td><td>${t.hardness}</td><td>${t.sticky}</td><td>${t.crispy}</td><td>${t.smooth}</td><td>${t.elastic}</td><td>${t.overall}</td><td><span class="tag tag-${t.grade==='优秀'?'green':'blue'}">${t.grade}</span></td><td style="white-space:nowrap;"><span class="link" style="margin-right:6px;">食材溯源链路</span><span class="link" style="margin-right:6px;">查看视频</span><span class="link" style="margin-right:6px;">查看</span><span class="link">编辑</span></td></tr>
|
||||
<tr><td>NUT-K002</td><td>2026-04-20 10:15</td><td>${t.hardness}</td><td>${t.sticky}</td><td>${t.crispy}</td><td>${t.smooth}</td><td>${t.elastic}</td><td>${(t.overall-0.2).toFixed(1)}</td><td><span class="tag tag-blue">良好</span></td><td style="white-space:nowrap;"><span class="link" style="margin-right:6px;">食材溯源链路</span><span class="link" style="margin-right:6px;">查看视频</span><span class="link" style="margin-right:6px;">查看</span><span class="link">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// 色泽检验详情
|
||||
function renderColor(d){
|
||||
const c = d.color;
|
||||
return `
|
||||
<div class="inspect-section">
|
||||
<div class="inspect-section__title">色泽评分均值 <span style="display:inline-flex;align-items:center;gap:8px;"><button class="btn btn-default" style="height:26px;padding:0 10px;font-size:var(--font-xs);">🔄 同步均值→餐品库</button><span class="tag tag-blue">已同步</span></span></div>
|
||||
<div class="inspect-grid">
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">主色调</div><div class="inspect-cell__value" style="font-size:var(--font-sm);">${c.hue}</div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">色泽均匀度</div><div class="inspect-cell__value">${c.uniform}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">光泽度</div><div class="inspect-cell__value">${c.gloss}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">新鲜度</div><div class="inspect-cell__value">${c.fresh}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">卖相评分</div><div class="inspect-cell__value">${c.look}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">综合色泽评分</div><div class="inspect-cell__value">${c.overall}<span class="inspect-cell__unit">/5</span></div></div>
|
||||
<div class="inspect-cell"><div class="inspect-cell__label">综合评级</div><div class="inspect-cell__value"><span class="tag tag-${c.grade==='优秀'?'green':'blue'}">${c.grade}</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspect-section">
|
||||
<div class="inspect-section__title">历史检验记录</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:12px;align-items:center;">
|
||||
<label style="font-size:var(--font-xs);color:var(--text-secondary);">检测时间：</label>
|
||||
<input type="date" style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);">
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">至</span>
|
||||
<input type="date" style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);">
|
||||
<label style="font-size:var(--font-xs);color:var(--text-secondary);margin-left:12px;">评级：</label>
|
||||
<select style="height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 8px;font-size:var(--font-xs);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;">
|
||||
<option>全部</option><option>优秀</option><option>良好</option>
|
||||
</select>
|
||||
<button class="btn btn-primary" style="height:30px;padding:0 12px;font-size:var(--font-xs);">查询</button>
|
||||
</div>
|
||||
<table class="inspect-table">
|
||||
<thead><tr><th>检验单号</th><th>检验时间</th><th>主色调</th><th>均匀度</th><th>光泽</th><th>新鲜度</th><th>卖相</th><th>综合</th><th>评级</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-C001</td><td>${d.time}</td><td>${c.hue}</td><td>${c.uniform}</td><td>${c.gloss}</td><td>${c.fresh}</td><td>${c.look}</td><td>${c.overall}</td><td><span class="tag tag-${c.grade==='优秀'?'green':'blue'}">${c.grade}</span></td><td style="white-space:nowrap;"><span class="link" style="margin-right:6px;">食材溯源链路</span><span class="link" style="margin-right:6px;">查看视频</span><span class="link" style="margin-right:6px;">查看</span><span class="link">编辑</span></td></tr>
|
||||
<tr><td>NUT-C002</td><td>2026-04-20 10:15</td><td>${c.hue}</td><td>${c.uniform}</td><td>${c.gloss}</td><td>${c.fresh}</td><td>${c.look}</td><td>${(c.overall-0.2).toFixed(1)}</td><td><span class="tag tag-blue">良好</span></td><td style="white-space:nowrap;"><span class="link" style="margin-right:6px;">食材溯源链路</span><span class="link" style="margin-right:6px;">查看视频</span><span class="link" style="margin-right:6px;">查看</span><span class="link">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// 侧边栏折叠
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
// 初始化
|
||||
renderDishList();
|
||||
renderDetail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -16,6 +16,7 @@ prototype-user-app/
|
||||
├── web-admin/ # Web 管理端原型
|
||||
├── employee-app/ # 员工端 APP 原型
|
||||
├── emergency-app/ # 健康应急 APP 原型
|
||||
├── other-terminals/ # 其他终端原型（小程序、大屏、PAD）
|
||||
├── 项目背景.md # 本文件 - 项目约束与规范
|
||||
└── README.md # 项目说明
|
||||
```
|
||||
@@ -24,7 +25,7 @@ prototype-user-app/
|
||||
|
||||
根目录 `index.html` 作为项目统一入口，部署到服务器后供研发人员浏览所有原型页面。
|
||||
|
||||
- 通过 Tab 切换三大终端（Web 管理端 / 员工端 APP / 健康应急 APP）
|
||||
- 通过 Tab 切换四大板块（Web 管理端 / 员工端 APP / 健康应急 APP / 其他终端）
|
||||
- 以模块卡片展示各业务模块，点击卡片跳转至该模块主页（index.html）
|
||||
- 点击卡片右上角页数徽章，悬浮展示该模块所有页面和弹窗的跳转链接
|
||||
- 已有原型的模块卡片带绿色边框呼吸灯动画，待开发模块为虚线灰色卡片
|
||||
@@ -128,6 +129,20 @@ emergency-app/
|
||||
└── im-chat.html
|
||||
```
|
||||
|
||||
**其他终端（other-terminals/）**
|
||||
|
||||
包含微信小程序、应急大屏、医疗点PAD端、体检医生工作台等独立交付产物。
|
||||
|
||||
```
|
||||
other-terminals/
|
||||
├── mini-program/ # 微信小程序（营养管理用户端）
|
||||
├── emergency-screen/ # 应急大屏
|
||||
│ ├── xian-center/ # 西安应急中心大屏
|
||||
│ ├── standard-center/ # 标准版中心大屏
|
||||
│ └── jiuchang-center/ # 九厂应急中心大屏
|
||||
└── medical-pad/ # 医疗点PAD端
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 二、HTML 原型编写规范
|
||||
@@ -196,7 +211,48 @@ Web管理端使用标准后台布局：
|
||||
内容区内边距: 24px
|
||||
```
|
||||
|
||||
### 2.5 统一设计令牌
|
||||
### 2.5 其他终端原型视觉规范
|
||||
|
||||
**微信小程序（营养管理用户端）**使用手机壳模拟器包裹：
|
||||
|
||||
```
|
||||
设备尺寸: 375 x 812 (iPhone X 逻辑分辨率)
|
||||
外壳圆角: 44px
|
||||
状态栏高度: 44px
|
||||
底部安全区: 34px
|
||||
导航栏高度: 44px
|
||||
底部Tab栏高度: 50px + 34px安全区
|
||||
```
|
||||
|
||||
**应急大屏**使用全屏深色背景布局：
|
||||
|
||||
```
|
||||
设计尺寸: 1920 x 1080 (Full HD)
|
||||
背景色: 深色渐变（#0a1628 → #0f2847）
|
||||
字体色: 浅色系（主文字 #E0F0FF，次要 #8CB8D9）
|
||||
数据可视化风格，无外壳包裹
|
||||
```
|
||||
|
||||
**医疗点PAD端**使用平板横屏布局：
|
||||
|
||||
```
|
||||
设计尺寸: 1024 x 768 (iPad 横屏)
|
||||
外壳圆角: 24px
|
||||
状态栏高度: 24px
|
||||
导航栏高度: 48px
|
||||
内容区内边距: 20px
|
||||
```
|
||||
|
||||
**体检医生WEB工作台**与Web管理端共用布局规范：
|
||||
|
||||
```
|
||||
最小宽度: 1280px
|
||||
侧边栏宽度: 240px（折叠态 64px）
|
||||
顶部导航高度: 56px
|
||||
内容区内边距: 24px
|
||||
```
|
||||
|
||||
### 2.6 统一设计令牌
|
||||
|
||||
```css
|
||||
/* 品牌色 */
|
||||
@@ -338,6 +394,10 @@ window.location.href = '../health-consult/consult-list.html';
|
||||
| 平台管理员 | 健康管理部门后台运营人员 | Web 管理端 |
|
||||
| 健康咨询专家 | 专业医师/健康管理师 | 健康应急 APP |
|
||||
| 应急就医服务人员 | 应急调度与协调人员 | 健康应急 APP |
|
||||
| 营养管理用户 | 通过小程序进行营养管理的员工 | 微信小程序 |
|
||||
| 体检医生 | 负责体检检查的医生 | 体检医生工作台 |
|
||||
| 医疗点医护人员 | 一线医疗点驻点医护 | 医疗点PAD端 |
|
||||
| 应急中心值班人员 | 应急指挥中心大屏监控人员 | 应急大屏 |
|
||||
|
||||
### 6.3 核心业务模块
|
||||
|
||||
@@ -360,6 +420,10 @@ window.location.href = '../health-consult/consult-list.html';
|
||||
| 应急就医 | 应急申请、资源调度、进度跟踪的全流程管理 | 员工端 APP / 健康应急 APP / Web 管理端 |
|
||||
| 一线医疗 | 一线医疗点服务与管理 | 员工端 APP / Web 管理端 |
|
||||
| AI | 智能健康助手，AI问答与健康建议 | 员工端 APP |
|
||||
| 营养管理小程序 | 员工端营养管理微信小程序 | 微信小程序 |
|
||||
| 应急大屏 | 应急指挥中心数据可视化大屏 | 应急大屏（西安/标准版/九厂） |
|
||||
| 医疗点PAD | 一线医疗点平板端服务系统 | 医疗点PAD端 |
|
||||
| 体检医生工作台 | 体检医生检查与报告录入 | 体检医生WEB工作台 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user