yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 营养小程序多页面交互优化及我的创作页面新增

Browse Source 
- 营养素明细列表增加分类标题（宏量营养素/矿物质/维生素）
- 食谱页扫码点餐按钮改为跳转订餐页
- 订餐页菜品添加个性化推荐标签（推荐/低卡/过敏/禁忌）
- 创作食谱页增加底部存为草稿+立即发布双按钮
- 做-社区主页banner增加"我的创作"入口
- 新增我的创作列表页（已发布/草稿箱Tab切换）
- 导航页SITE_MAP补全新页面条目

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
2026-05-18 14:23:12 +08:00
co-authored by Claude Opus 4.6
parent 37c8eb856f
commit baa6faacfa
8 changed files with 270 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -733,6 +733,7 @@ const SITE_MAP = [
{label:'创作排行', file:'make-ranking.html'},
{label:'分享赚钱', file:'make-share.html'},
{label:'热门创作', file:'make-popular.html'},
{label:'我的创作', file:'make-my-recipes.html'},
{label:'个人中心', file:'me-home.html'},
{label:'健康档案', file:'me-health.html'},
{label:'我的订单', file:'me-orders.html'},
other-module/mini-program/nutrition/eat-nutrition.html
+12
View File
@@ -94,6 +94,15 @@
.bar-label .vals .cur { color: #333; font-weight: 600; }
.bar-label .vals .sep { color: #ccc; }
.bar-label .vals .ref { color: #999; }
/* 分类标题 */
.category-title {
display: flex; align-items: center; gap: 6px; margin: 14px 0 10px;
padding: 6px 10px; background: #f8f9fa; border-radius: 6px;
border-left: 3px solid #1677ff;
}
.category-title:first-child { margin-top: 0; }
.category-title .cat-name { font-size: 13px; font-weight: 600; color: #333; }
.category-title .cat-count { font-size: 11px; color: #999; }
.progress-bar {
position: relative; height: 8px; background: #f5f5f5; border-radius: 4px; overflow: hidden;
}
@@ -199,6 +208,7 @@
<span><span class="dot" style="background:#f5222d"></span>超标(&gt;120%)</span>
</div>
<!-- 宏量营养素 -->
<div class="category-title"><span class="cat-name">宏量营养素</span><span class="cat-count">9项</span></div>
<div class="bar-item">
<div class="bar-label"><span class="name">热量</span><span class="vals"><span class="cur">1286</span><span class="sep"> / </span><span class="ref">2000kcal</span></span></div>
<div class="progress-bar"><div class="fill" style="width:64%;background:#52c41a"></div></div>
@@ -236,6 +246,7 @@
<div class="progress-bar"><div class="fill" style="width:95%;background:#52c41a"></div></div>
</div>
<!-- 矿物质 -->
<div class="category-title"><span class="cat-name">矿物质</span><span class="cat-count">7项</span></div>
<div class="bar-item">
<div class="bar-label"><span class="name">钠</span><span class="vals"><span class="cur">2600mg</span><span class="sep"> / </span><span class="ref">2000mg</span></span></div>
<div class="progress-bar"><div class="fill" style="width:100%;background:#f5222d"></div></div>
@@ -265,6 +276,7 @@
<div class="progress-bar"><div class="fill" style="width:55%;background:#1677ff"></div></div>
</div>
<!-- 维生素 -->
<div class="category-title"><span class="cat-name">维生素</span><span class="cat-count">9项</span></div>
<div class="bar-item">
<div class="bar-label"><span class="name">维生素A</span><span class="vals"><span class="cur">320μgRE</span><span class="sep"> / </span><span class="ref">800μgRE</span></span></div>
<div class="progress-bar"><div class="fill" style="width:40%;background:#1677ff"></div></div>
other-module/mini-program/nutrition/eat-order.html
+16 -7
View File
@@ -54,7 +54,16 @@
display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
}
.menu-item .food-info { flex: 1; min-width: 0; }
.menu-item .food-name { font-size: 14px; font-weight: 600; }
.menu-item .food-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.food-tag {
font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px;
white-space: nowrap; line-height: 16px;
}
.food-tag.recommend { background: #f6ffed; color: #52c41a; }
.food-tag.low-cal { background: #e6f7ff; color: #1677ff; }
.food-tag.high-protein { background: #f9f0ff; color: #722ed1; }
.food-tag.allergy { background: #fff7e6; color: #fa8c16; }
.food-tag.contraindication { background: #fff1f0; color: #f5222d; }
.menu-item .food-desc { font-size: 11px; color: #999; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item .food-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.menu-item .food-price { font-size: 15px; font-weight: 700; color: #f5222d; }
@@ -120,7 +129,7 @@
<div class="menu-item" data-price="12">
<div class="food-icon">🍗</div>
<div class="food-info">
<div class="food-name">宫保鸡丁</div>
<div class="food-name">宫保鸡丁<span class="food-tag allergy">含过敏食材</span></div>
<div class="food-desc">鸡胸肉花生爆炒 · 285kcal</div>
<div class="food-bottom">
<span class="food-price">¥12</span>
@@ -132,7 +141,7 @@
<div class="menu-item" data-price="18">
<div class="food-icon">🐟</div>
<div class="food-info">
<div class="food-name">清蒸鱼</div>
<div class="food-name">清蒸鱼<span class="food-tag recommend">推荐</span></div>
<div class="food-desc">新鲜草鱼清蒸 · 142kcal</div>
<div class="food-bottom">
<span class="food-price">¥18</span>
@@ -144,7 +153,7 @@
<div class="menu-item" data-price="8">
<div class="food-icon">🥦</div>
<div class="food-info">
<div class="food-name">炒西兰花</div>
<div class="food-name">炒西兰花<span class="food-tag low-cal">低卡</span></div>
<div class="food-desc">大火快炒翠绿脆嫩 · 68kcal</div>
<div class="food-bottom">
<span class="food-price">¥8</span>
@@ -156,7 +165,7 @@
<div class="menu-item" data-price="8">
<div class="food-icon">🍅</div>
<div class="food-info">
<div class="food-name">番茄炒蛋</div>
<div class="food-name">番茄炒蛋<span class="food-tag recommend">推荐</span></div>
<div class="food-desc">酸甜可口老少皆宜 · 168kcal</div>
<div class="food-bottom">
<span class="food-price">¥8</span>
@@ -168,7 +177,7 @@
<div class="menu-item" data-price="16">
<div class="food-icon">🍖</div>
<div class="food-info">
<div class="food-name">红烧肉</div>
<div class="food-name">红烧肉<span class="food-tag contraindication">慢病禁忌</span></div>
<div class="food-desc">五花肉慢炖软糯入味 · 395kcal</div>
<div class="food-bottom">
<span class="food-price">¥16</span>
@@ -180,7 +189,7 @@
<div class="menu-item" data-price="6">
<div class="food-icon">🥬</div>
<div class="food-info">
<div class="food-name">蒜蓉油麦菜</div>
<div class="food-name">蒜蓉油麦菜<span class="food-tag low-cal">低卡</span></div>
<div class="food-desc">清淡爽口富含纤维 · 45kcal</div>
<div class="food-bottom">
<span class="food-price">¥6</span>
other-module/mini-program/nutrition/eat-recipe.html
+1 -1
View File
@@ -150,7 +150,7 @@
<!-- 快捷操作 -->
<div class="quick-actions">
<button class="quick-btn" style="background:linear-gradient(135deg,#1677ff,#4096ff)" onclick="alert('扫码后跳转至点餐页面')"><span class="qicon">📷</span>扫码点餐</button>
<a class="quick-btn" style="background:linear-gradient(135deg,#1677ff,#4096ff)" href="eat-order.html"><span class="qicon">📷</span>扫码点餐</a>
<a class="quick-btn" style="background:linear-gradient(135deg,#52c41a,#73d13d)" href="eat-order.html"><span class="qicon">🛒</span>订餐</a>
<a class="quick-btn" style="background:linear-gradient(135deg,#722ed1,#9254de)" href="eat-recipe-today.html"><span class="qicon">📋</span>查看食谱</a>
</div>
other-module/mini-program/nutrition/make-create.html
+17 -5
View File
@@ -25,10 +25,18 @@
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; border-bottom: 0.5px solid #f0f0f0; flex-shrink: 0; position: relative; }
.nav-bar .back { font-size: 22px; color: #1677ff; cursor: pointer; text-decoration: none; line-height: 1; }
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; }
.nav-bar .publish {
margin-left: auto; padding: 5px 14px; border-radius: 14px;
background: #1677ff; color: #fff; font-size: 13px; font-weight: 600;
border: none; cursor: pointer;
/* 底部操作栏 */
.bottom-actions {
display: flex; gap: 12px; padding: 10px 16px;
background: #fff; border-top: 0.5px solid #f0f0f0; flex-shrink: 0;
}
.bottom-actions .btn-draft {
flex: 1; height: 44px; border-radius: 22px; border: 1.5px solid #d9d9d9;
background: #fff; color: #666; font-size: 15px; font-weight: 600; cursor: pointer;
}
.bottom-actions .btn-publish {
flex: 1; height: 44px; border-radius: 22px; border: none;
background: #1677ff; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.home-indicator {
height: 20px; display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0;
@@ -107,7 +115,6 @@
<div class="nav-bar">
<a class="back" href="make-home.html">‹</a>
<span class="title">创作食谱</span>
<button class="publish">发布</button>
</div>
<div class="page-content">
<!-- 封面图上传 -->
@@ -177,6 +184,11 @@
<div class="add-step-btn">+ 添加步骤</div>
</div>
</div>
<!-- 底部操作栏 -->
<div class="bottom-actions">
<button class="btn-draft">存为草稿</button>
<button class="btn-publish">立即发布</button>
</div>
<div class="home-indicator"></div>
</div>
</body>
other-module/mini-program/nutrition/make-home.html
+7
View File
@@ -36,6 +36,12 @@
}
.banner .title { font-size: 20px; font-weight: 700; color: #fff; position: relative; z-index: 1; }
.banner .desc { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 6px; position: relative; z-index: 1; }
.banner .my-recipes-btn {
position: absolute; top: 16px; right: 16px; z-index: 2;
padding: 5px 12px; border-radius: 14px; background: rgba(255,255,255,0.25);
color: #fff; font-size: 12px; font-weight: 600; text-decoration: none;
display: flex; align-items: center; gap: 4px; backdrop-filter: blur(4px);
}
/* 四宫格入口 */
.grid-nav {
@@ -109,6 +115,7 @@
<div class="page-content">
<!-- Banner -->
<div class="banner">
<a class="my-recipes-btn" href="make-my-recipes.html">📖 我的创作</a>
<div class="title">一起动手做健康餐 🍳</div>
<div class="desc">分享你的创意食谱，和大家一起吃出好身体</div>
</div>
other-module/mini-program/nutrition/make-my-recipes.html
+216
View File
@@ -0,0 +1,216 @@
<!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>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #2a2a2a; display: flex; justify-content: center; align-items: flex-start;
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
padding: 24px 0 40px;
}
.phone-shell {
width: 390px; height: 844px; background: #fff; border-radius: 44px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
overflow: hidden; position: relative; display: flex; flex-direction: column;
}
.status-bar {
height: 44px; background: #fff; display: flex; align-items: center;
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.status-bar .time { font-size: 15px; font-weight: 700; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
.nav-bar {
height: 44px; background: #fff; display: flex; align-items: center;
padding: 0 16px; border-bottom: 0.5px solid #f0f0f0; flex-shrink: 0; position: relative;
}
.nav-bar .back { font-size: 22px; color: #1677ff; cursor: pointer; text-decoration: none; line-height: 1; }
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; }
.home-indicator {
height: 20px; display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0;
}
.home-indicator::after { content: ''; width: 120px; height: 5px; background: #1a1a1a; border-radius: 3px; opacity: 0.2; }
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
.page-content::-webkit-scrollbar { display: none; }
/* Tab 切换 */
.content-tabs {
display: flex; background: #fff; border-bottom: 1px solid #f0f0f0;
}
.content-tab {
flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #999;
cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500;
}
.content-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* 统计栏 */
.stats-bar {
display: flex; background: #fff; padding: 14px 16px; margin-bottom: 8px;
gap: 0;
}
.stat-item {
flex: 1; text-align: center; border-right: 0.5px solid #f0f0f0;
}
.stat-item:last-child { border-right: none; }
.stat-item .num { font-size: 20px; font-weight: 700; color: #1a1a1a; }
.stat-item .label { font-size: 11px; color: #999; margin-top: 2px; }
/* 食谱列表 */
.recipe-list { background: #fff; padding: 0 16px; }
.recipe-card {
display: flex; align-items: center; gap: 12px; padding: 14px 0;
border-bottom: 0.5px solid #f0f0f0;
}
.recipe-card:last-child { border-bottom: none; }
.recipe-card .cover {
width: 64px; height: 64px; border-radius: 10px; display: flex;
align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0;
}
.recipe-card .info { flex: 1; min-width: 0; }
.recipe-card .recipe-name {
font-size: 14px; font-weight: 600; color: #1a1a1a;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recipe-card .recipe-meta { font-size: 12px; color: #999; margin-top: 4px; }
.recipe-card .recipe-stats { font-size: 11px; color: #ff6b6b; margin-top: 3px; }
/* 状态标签 */
.status-tag {
font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
display: inline-block; margin-left: 6px; vertical-align: middle;
}
.status-tag.published { background: #f6ffed; color: #52c41a; }
.status-tag.draft { background: #fff7e6; color: #fa8c16; }
/* 操作按钮 */
.recipe-card .action-btn {
padding: 6px 14px; border-radius: 14px; font-size: 12px; font-weight: 600;
border: none; cursor: pointer; flex-shrink: 0; text-decoration: none;
}
.action-btn.edit { background: #e6f4ff; color: #1677ff; }
.action-btn.view { background: #f5f5f5; color: #666; }
/* 空状态 */
.empty-state {
text-align: center; padding: 60px 20px; color: #999;
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state .empty-text { font-size: 14px; }
.empty-state .empty-btn {
display: inline-block; margin-top: 16px; padding: 8px 24px; border-radius: 18px;
background: #1677ff; color: #fff; font-size: 13px; font-weight: 600;
text-decoration: none;
}
</style>
</head>
<body>
<div class="phone-shell">
<div class="status-bar">
<span class="time">09:41</span>
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
</div>
<div class="nav-bar">
<a class="back" href="make-home.html">‹</a>
<span class="title">我的创作</span>
</div>
<div class="page-content">
<!-- 统计栏 -->
<div class="stats-bar">
<div class="stat-item"><div class="num">5</div><div class="label">已发布</div></div>
<div class="stat-item"><div class="num">2</div><div class="label">草稿</div></div>
<div class="stat-item"><div class="num">486</div><div class="label">总获赞</div></div>
</div>
<!-- Tab 切换 -->
<div class="content-tabs">
<div class="content-tab active" data-panel="publishedPanel">已发布</div>
<div class="content-tab" data-panel="draftPanel">草稿箱</div>
</div>
<!-- 已发布面板 -->
<div class="tab-panel active" id="publishedPanel">
<div class="recipe-list">
<div class="recipe-card">
<div class="cover" style="background:#fff7e6">🍳</div>
<div class="info">
<div class="recipe-name">低脂番茄炒蛋<span class="status-tag published">已发布</span></div>
<div class="recipe-meta">发布于 2026-05-16 · 180kcal/份</div>
<div class="recipe-stats">❤️ 286 · 👁️ 1.2k</div>
</div>
<a class="action-btn view" href="make-follow.html">查看</a>
</div>
<div class="recipe-card">
<div class="cover" style="background:#f6ffed">🥗</div>
<div class="info">
<div class="recipe-name">鸡胸肉蔬菜沙拉<span class="status-tag published">已发布</span></div>
<div class="recipe-meta">发布于 2026-05-14 · 220kcal/份</div>
<div class="recipe-stats">❤️ 128 · 👁️ 860</div>
</div>
<a class="action-btn view" href="make-follow.html">查看</a>
</div>
<div class="recipe-card">
<div class="cover" style="background:#e6f4ff">🐟</div>
<div class="info">
<div class="recipe-name">清蒸鲈鱼<span class="status-tag published">已发布</span></div>
<div class="recipe-meta">发布于 2026-05-10 · 142kcal/份</div>
<div class="recipe-stats">❤️ 56 · 👁️ 420</div>
</div>
<a class="action-btn view" href="make-follow.html">查看</a>
</div>
<div class="recipe-card">
<div class="cover" style="background:#fff1f0">🥦</div>
<div class="info">
<div class="recipe-name">蒜蓉西兰花<span class="status-tag published">已发布</span></div>
<div class="recipe-meta">发布于 2026-05-08 · 68kcal/份</div>
<div class="recipe-stats">❤️ 12 · 👁️ 180</div>
</div>
<a class="action-btn view" href="make-follow.html">查看</a>
</div>
<div class="recipe-card">
<div class="cover" style="background:#f9f0ff">🍜</div>
<div class="info">
<div class="recipe-name">低钠杂粮面<span class="status-tag published">已发布</span></div>
<div class="recipe-meta">发布于 2026-05-05 · 310kcal/份</div>
<div class="recipe-stats">❤️ 4 · 👁️ 90</div>
</div>
<a class="action-btn view" href="make-follow.html">查看</a>
</div>
</div>
</div>
<!-- 草稿箱面板 -->
<div class="tab-panel" id="draftPanel">
<div class="recipe-list">
<div class="recipe-card">
<div class="cover" style="background:#fff7e6">🍲</div>
<div class="info">
<div class="recipe-name">减脂南瓜浓汤<span class="status-tag draft">草稿</span></div>
<div class="recipe-meta">最后编辑 2026-05-17 14:30</div>
</div>
<a class="action-btn edit" href="make-create.html">继续编辑</a>
</div>
<div class="recipe-card">
<div class="cover" style="background:#e6f4ff">🥚</div>
<div class="info">
<div class="recipe-name">水波蛋牛油果吐司<span class="status-tag draft">草稿</span></div>
<div class="recipe-meta">最后编辑 2026-05-15 09:20</div>
</div>
<a class="action-btn edit" href="make-create.html">继续编辑</a>
</div>
</div>
</div>
</div>
<div class="home-indicator"></div>
</div>
<script>
/* Tab 切换 */
var contentTabs = document.querySelectorAll('.content-tab');
contentTabs.forEach(function(tab) {
tab.addEventListener('click', function() {
contentTabs.forEach(function(t) { t.classList.remove('active'); });
tab.classList.add('active');
document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
document.getElementById(tab.dataset.panel).classList.add('active');
});
});
</script>
</body>
</html>
web-admin/nutrition/doc/营养管理功能说明.md
View File