From c12590039bdb633e89b118635af876fb4c84e5c4 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Sat, 11 Apr 2026 10:21:18 +0000
Subject: [PATCH] =?UTF-8?q?UI:=20=E4=BB=B7=E6=A0=BC=E6=A1=86=E9=9D=A0?=
 =?UTF-8?q?=E5=8F=B3=E7=BC=A9=E5=B0=8F=EF=BC=8C=E5=88=A9=E6=B6=A6=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=9C=89=E8=BE=B9=E6=A1=86=EF=BC=8C=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=AF=BC=E5=85=A5?=
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 | 52 +++++++++++++++++----------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/src/views/Projects.vue b/frontend/src/views/Projects.vue
index f9f862a..1127791 100644
--- a/frontend/src/views/Projects.vue
+++ b/frontend/src/views/Projects.vue
@@ -57,7 +57,7 @@
           class="proj-name-input"
           @blur="saveProject"
         />
-        <button class="btn-outline btn-sm" @click="importFromRecipe">📋 从配方导入</button>
+        <button v-if="!isDemoMode || auth.isAdmin" class="btn-outline btn-sm" @click="importFromRecipe">📋 从配方导入</button>
       </div>
 
       <!-- Ingredients Table -->
@@ -174,21 +174,21 @@
         </div>
         <div class="profit-col">
           <h4>📊 利润分析</h4>
-          <div class="profit-item">
-            <span class="profit-label">单件利润</span>
-            <span class="profit-value" :class="{ negative: unitProfit < 0 }">{{ oils.fmtPrice(unitProfit) }}</span>
+          <div class="profit-card">
+            <div class="profit-card-label">单件利润</div>
+            <div class="profit-card-value" :class="{ negative: unitProfit < 0 }">{{ oils.fmtPrice(unitProfit) }}</div>
           </div>
-          <div class="profit-item">
-            <span class="profit-label">利润率</span>
-            <span class="profit-value" :class="{ negative: profitMargin < 0 }">{{ profitMargin.toFixed(1) }}%</span>
+          <div class="profit-card">
+            <div class="profit-card-label">利润率</div>
+            <div class="profit-card-value" :class="{ negative: profitMargin < 0 }">{{ profitMargin.toFixed(1) }}%</div>
           </div>
-          <div class="profit-item">
-            <span class="profit-label">批量总利润</span>
-            <span class="profit-value" :class="{ negative: batchProfit < 0 }">{{ oils.fmtPrice(batchProfit) }}</span>
+          <div class="profit-card">
+            <div class="profit-card-label">批量总利润</div>
+            <div class="profit-card-value" :class="{ negative: batchProfit < 0 }">{{ oils.fmtPrice(batchProfit) }}</div>
           </div>
-          <div class="profit-item">
-            <span class="profit-label">批量总收入</span>
-            <span class="profit-value">{{ oils.fmtPrice(batchRevenue) }}</span>
+          <div class="profit-card">
+            <div class="profit-card-label">批量总收入</div>
+            <div class="profit-card-value">{{ oils.fmtPrice(batchRevenue) }}</div>
           </div>
         </div>
       </div>
@@ -702,13 +702,16 @@ function formatDate(d) {
 .price-row {
   display: flex;
   align-items: center;
-  padding: 8px 0;
+  justify-content: space-between;
+  padding: 6px 0;
   border-bottom: 1px solid #eae8e5;
-  font-size: 14px;
-  gap: 12px;
+  font-size: 13px;
 }
-.price-row .price-label { flex: 0 0 80px; }
-.price-row .price-value, .price-row .price-input-wrap, .price-row .form-input-inline { flex: 1; }
+.price-row .price-label { color: #6b6375; }
+.price-row .price-value { text-align: right; font-weight: 600; }
+.price-row .price-input-wrap { display: flex; align-items: center; gap: 2px; }
+.price-row .form-input-inline, .price-row input[type="number"] { width: 70px; text-align: right; padding: 4px 6px; border: 1px solid #d4cfc7; border-radius: 6px; font-size: 13px; font-family: inherit; outline: none; }
+.price-row .form-input-inline:focus, .price-row input[type="number"]:focus { border-color: #7ec6a4; }
 
 .price-row.total {
   border-top: 2px solid #d4cfc7;
@@ -760,14 +763,13 @@ function formatDate(d) {
   flex: 1; padding: 14px; background: #f8f7f5; border-radius: 12px; border: 1.5px solid #e5e4e7;
 }
 .pricing-col h4, .profit-col h4 { margin: 0 0 10px; font-size: 14px; color: #3e3a44; }
-.profit-item {
-  display: flex; justify-content: space-between; align-items: center;
-  padding: 8px 0; border-bottom: 1px solid #eae8e5; font-size: 14px;
+.profit-card {
+  padding: 10px 12px; background: #fff; border-radius: 10px;
+  border: 1.5px solid #e5e4e7; text-align: center; margin-bottom: 6px;
 }
-.profit-item:last-child { border-bottom: none; }
-.profit-label { color: #6b6375; font-size: 13px; }
-.profit-value { font-size: 16px; font-weight: 700; color: #4a9d7e; }
-.profit-value.negative { color: #ef5350; }
+.profit-card-label { font-size: 12px; color: #6b6375; margin-bottom: 2px; }
+.profit-card-value { font-size: 18px; font-weight: 700; color: #4a9d7e; }
+.profit-card-value.negative { color: #ef5350; }
 
 .notes-textarea {
   width: 100%;