From 51e70e5bcae0e72cdf1ef7a2e6ed3fb29e4e75a2 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Sat, 11 Apr 2026 10:00:02 +0000
Subject: [PATCH] =?UTF-8?q?UI:=20=E6=B6=88=E8=80=97=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E7=A7=BB=E5=88=B0=E9=85=8D=E6=96=B9=E6=80=BB=E6=88=90=E6=9C=AC?=
 =?UTF-8?q?=E4=B8=8B=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/Projects.vue | 41 ++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/src/views/Projects.vue b/frontend/src/views/Projects.vue
index a2a97e2..5789973 100644
--- a/frontend/src/views/Projects.vue
+++ b/frontend/src/views/Projects.vue
@@ -110,6 +110,26 @@
           <span class="total-price">{{ oils.fmtPrice(materialCost) }}</span>
         </div>
 
+        <!-- Consumption Analysis -->
+        <div v-if="consumptionData.length" class="consumption-section" style="margin-top:12px">
+          <h4>🧪 消耗分析</h4>
+          <table class="consumption-table">
+            <thead>
+              <tr><th>精油</th><th>单次用量</th><th>瓶装容量</th><th>可做次数</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="c in consumptionData" :key="c.oil" :class="{ 'limit-oil': c.isLimit }">
+                <td>{{ c.oil }}</td>
+                <td>{{ c.drops }}滴</td>
+                <td>{{ c.bottleDrops }}滴</td>
+                <td>{{ c.sessions }}次</td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="consumption-summary">
+            <span>⚠️ <strong>{{ limitingOil }}</strong> 最先消耗完，最多可做 <strong>{{ maxSessions }}</strong> 次</span>
+          </div>
+        </div>
       </div>
 
       <!-- Pricing Section -->
@@ -186,27 +206,6 @@
         </div>
       </div>
 
-      <!-- Consumption Analysis -->
-      <div v-if="consumptionData.length" class="consumption-section">
-        <h4>🧪 消耗分析</h4>
-        <table class="consumption-table">
-          <thead>
-            <tr><th>精油</th><th>单次用量</th><th>瓶装容量</th><th>可做次数</th></tr>
-          </thead>
-          <tbody>
-            <tr v-for="c in consumptionData" :key="c.oil" :class="{ 'limit-oil': c.isLimit }">
-              <td>{{ c.oil }}</td>
-              <td>{{ c.drops }}滴</td>
-              <td>{{ c.bottleDrops }}滴</td>
-              <td>{{ c.sessions }}次</td>
-            </tr>
-          </tbody>
-        </table>
-        <div class="consumption-summary">
-          <span>⚠️ <strong>{{ limitingOil }}</strong> 最先消耗完，最多可做 <strong>{{ maxSessions }}</strong> 次</span>
-        </div>
-      </div>
-
       <!-- Notes -->
       <div class="notes-section">
         <h4>📝 备注</h4>