feat(frontend): 饮食首页今日餐桌主视觉（暖灶主题）

cfc-frontend/pages/diet/index.vue

@@ -1,47 +1,26 @@
 <template>
   <view class="diet-page">
     <scroll-view class="content" scroll-y>
-      <!-- 页面标题区 -->
-      <view class="page-header">
-        <view class="header-icon-wrap">
-          <text class="header-icon">🍽️</text>
-        </view>
-        <view class="header-text">
-          <text class="header-title">饮食推荐</text>
-          <text class="header-subtitle">科学膳食 · 健康生活</text>
-        </view>
-      </view>
-
-      <!-- 今日共餐摘要 -->
-      <view class="card">
-        <view class="card-header">
-          <view class="card-dot"></view>
-          <text class="card-title">今日共餐</text>
-        </view>
-        <view class="card-body">
-          <view class="meal-grid">
-            <view class="meal-item" v-if="mealSummary.breakfast">
-              <text class="meal-emoji">🌅</text>
-              <text class="meal-label">早餐</text>
-              <text class="meal-members">{{ mealSummary.breakfast }}</text>
-            </view>
-            <view class="meal-item" v-if="mealSummary.lunch">
-              <text class="meal-emoji">☀️</text>
-              <text class="meal-label">午餐</text>
-              <text class="meal-members">{{ mealSummary.lunch }}</text>
-            </view>
-            <view class="meal-item" v-if="mealSummary.dinner">
-              <text class="meal-emoji">🌙</text>
-              <text class="meal-label">晚餐</text>
-              <text class="meal-members">{{ mealSummary.dinner }}</text>
-            </view>
+      <!-- ===== 今日餐桌主视觉 ===== -->
+      <view class="dining-hero">
+        <view class="hero-top">
+          <view class="hero-icon-wrap"><text class="hero-icon">🍳</text></view>
+          <view class="hero-text">
+            <text class="hero-title">今日共餐</text>
+            <text class="hero-subtitle">{{ heroSubtitle }}</text>
           </view>
-          <view class="empty-hint" v-if="!mealSummary.breakfast && !mealSummary.lunch && !mealSummary.dinner">
-            <text class="empty-icon">📋</text>
-            <text class="empty-text">尚未配置共餐</text>
-            <text class="empty-sub">点击下方「共餐配置」开始设置</text>
+        </view>
+        <view class="hero-meals" v-if="hasMealConfig">
+          <view class="hero-meal" v-for="m in heroMeals" :key="m.key">
+            <text class="hero-meal-emoji">{{ m.emoji }}</text>
+            <text class="hero-meal-label">{{ m.label }}</text>
+            <text class="hero-meal-count">{{ m.count || '—' }}</text>
           </view>
         </view>
+        <view class="hero-empty" v-else @tap="navTo('/pages/diet/meal-config')">
+          <text class="hero-empty-text">还没设置共餐？点这里安排家人一起吃饭</text>
+          <view class="hero-empty-btn">去设置共餐</view>
+        </view>
       </view>
 
       <!-- 食材推荐器 -->
@@ -198,6 +177,26 @@ export default {
       uploadPromptShown: false
     }
   },
+  computed: {
+    heroSubtitle: function() {
+      var self = this
+      return (self.isWeekend(new Date()) ? '周末' : '工作日') + ' · 全家一起吃饭'
+    },
+    heroMeals: function() {
+      var defs = [
+        { key: 'breakfast', label: '早餐', emoji: '🌅' },
+        { key: 'lunch', label: '午餐', emoji: '☀️' },
+        { key: 'dinner', label: '晚餐', emoji: '🌙' }
+      ]
+      var self = this
+      return defs.map(function(d) {
+        return { key: d.key, label: d.label, emoji: d.emoji, count: self.mealSummary[d.key] || '' }
+      })
+    },
+    hasMealConfig: function() {
+      return !!(this.mealSummary.breakfast || this.mealSummary.lunch || this.mealSummary.dinner)
+    }
+  },
   onLoad: function() {
     this.familyId = uni.getStorageSync('familyId')
     this.familyMemberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId')
@@ -347,11 +346,47 @@ export default {
 </script>
 
 <style scoped>
+/* ===== 页面令牌（暖灶·家的味道） ===== */
 .diet-page {
   min-height: 100vh;
-  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 30%, #F5F7FA 100%);
+  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
   overflow: hidden;
 }
+.dining-hero {
+  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  border-radius: 32rpx;
+  padding: 36rpx 32rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 8rpx 32rpx rgba(255, 140, 66, 0.25);
+}
+.hero-top { display: flex; align-items: center; margin-bottom: 24rpx; }
+.hero-icon-wrap {
+  width: 88rpx; height: 88rpx; border-radius: 50%;
+  background: rgba(255,255,255,0.22);
+  display: flex; align-items: center; justify-content: center;
+  margin-right: 20rpx; flex-shrink: 0;
+}
+.hero-icon { font-size: 44rpx; }
+.hero-title { font-size: 38rpx; font-weight: 700; color: #FFFFFF; display: block; }
+.hero-subtitle { font-size: 24rpx; color: rgba(255,255,255,0.85); margin-top: 6rpx; display: block; }
+.hero-meals { display: flex; }
+.hero-meal {
+  flex: 1; margin: 0 8rpx;
+  background: rgba(255,255,255,0.18);
+  border-radius: 20rpx; padding: 20rpx 8rpx;
+  display: flex; flex-direction: column; align-items: center;
+}
+.hero-meal:first-child { margin-left: 0; }
+.hero-meal:last-child { margin-right: 0; }
+.hero-meal-emoji { font-size: 40rpx; margin-bottom: 8rpx; }
+.hero-meal-label { font-size: 24rpx; color: #FFFFFF; }
+.hero-meal-count { font-size: 22rpx; color: rgba(255,255,255,0.9); margin-top: 6rpx; font-weight: 600; }
+.hero-empty { display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; }
+.hero-empty-text { font-size: 26rpx; color: #FFFFFF; margin-bottom: 20rpx; }
+.hero-empty-btn {
+  background: #FFFFFF; color: #C2410C; font-size: 28rpx; font-weight: 600;
+  padding: 18rpx 44rpx; border-radius: 999rpx;
+}
 .content {
   padding: 24rpx 32rpx;
   box-sizing: border-box;
@@ -359,44 +394,7 @@ export default {
   overflow: hidden;
 }
 
-/* 页面头部 */
-.page-header {
-  display: flex;
-  align-items: center;
-  padding: 20rpx 0 32rpx;
-  box-sizing: border-box;
-  width: 100%;
-}
-.header-icon-wrap {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 24rpx;
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 24rpx;
-  flex-shrink: 0;
-}
-.header-icon {
-  font-size: 40rpx;
-}
-.header-text {
-  display: flex;
-  flex-direction: column;
-}
-.header-title {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #333;
-}
-.header-subtitle {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 4rpx;
-}
-
-/* 卡片通用 */
+/* 共餐格子 */
 .card {
   background: #FFFFFF;
   border-radius: 24rpx;
@@ -428,43 +426,6 @@ export default {
   padding: 24rpx 28rpx 28rpx;
 }
 
-/* 共餐格子 */
-.meal-grid {
-  display: flex;
-  justify-content: space-between;
-}
-.meal-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: #FFF8F0;
-  border-radius: 16rpx;
-  padding: 24rpx 12rpx;
-  margin-left: 12rpx;
-  margin-right: 12rpx;
-}
-.meal-item:first-child {
-  margin-left: 0;
-}
-.meal-item:last-child {
-  margin-right: 0;
-}
-.meal-emoji {
-  font-size: 36rpx;
-  margin-bottom: 8rpx;
-}
-.meal-label {
-  font-size: 24rpx;
-  color: #666;
-  margin-bottom: 4rpx;
-}
-.meal-members {
-  font-size: 24rpx;
-  color: #FF8C42;
-  font-weight: 600;
-}
-
 /* 操作按钮栏 */
 .action-bar {
   display: flex;
@@ -660,12 +621,6 @@ export default {
 }
 
 /* 空状态 */
-.empty-hint {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20rpx 0;
-}
 .empty-state {
   display: flex;
   flex-direction: column;