From c728bb725928056968881f832455964ba1c5ffe8 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Sat, 11 Apr 2026 10:24:22 +0000
Subject: [PATCH] =?UTF-8?q?UI:=20=E4=BB=B7=E6=A0=BC=E5=80=BC=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E8=BE=93=E5=85=A5=E6=A1=86+=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E6=B8=85=E9=9B=B6?=
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 | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/Projects.vue b/frontend/src/views/Projects.vue
index 1127791..b03393b 100644
--- a/frontend/src/views/Projects.vue
+++ b/frontend/src/views/Projects.vue
@@ -57,7 +57,7 @@
           class="proj-name-input"
           @blur="saveProject"
         />
-        <button v-if="!isDemoMode || auth.isAdmin" class="btn-outline btn-sm" @click="importFromRecipe">📋 从配方导入</button>
+        <button class="btn-outline btn-sm" :disabled="isDemoMode && !auth.isAdmin" @click="importFromRecipe">📋 从配方导入</button>
       </div>
 
       <!-- Ingredients Table -->
@@ -145,23 +145,23 @@
           <h4>💰 价格计算</h4>
           <div class="price-row">
             <span class="price-label">原料成本</span>
-            <span class="price-value cost">{{ oils.fmtPrice(materialCost) }}</span>
+            <span class="price-val-box">{{ oils.fmtPrice(materialCost) }}</span>
           </div>
           <div class="price-row">
             <span class="price-label">包装费用</span>
-            <div class="price-input-wrap"><span>¥</span><input v-model.number="selectedProject.packaging_cost" type="number" class="form-input-inline" @change="saveProject" /></div>
+            <div class="price-input-wrap"><span>¥</span><input v-model.number="selectedProject.packaging_cost" type="number" class="form-input-inline" placeholder="0" @focus="clearZero($event)" @change="saveProject" /></div>
           </div>
           <div class="price-row">
             <span class="price-label">人工费用</span>
-            <div class="price-input-wrap"><span>¥</span><input v-model.number="selectedProject.labor_cost" type="number" class="form-input-inline" @change="saveProject" /></div>
+            <div class="price-input-wrap"><span>¥</span><input v-model.number="selectedProject.labor_cost" type="number" class="form-input-inline" placeholder="0" @focus="clearZero($event)" @change="saveProject" /></div>
           </div>
           <div class="price-row">
             <span class="price-label">其他成本</span>
-            <div class="price-input-wrap"><span>¥</span><input v-model.number="selectedProject.other_cost" type="number" class="form-input-inline" @change="saveProject" /></div>
+            <div class="price-input-wrap"><span>¥</span><input v-model.number="selectedProject.other_cost" type="number" class="form-input-inline" placeholder="0" @focus="clearZero($event)" @change="saveProject" /></div>
           </div>
           <div class="price-row total">
             <span class="price-label">总成本</span>
-            <span class="price-value cost">{{ oils.fmtPrice(totalCost) }}</span>
+            <span class="price-val-box">{{ oils.fmtPrice(totalCost) }}</span>
           </div>
           <div class="price-row">
             <span class="price-label">售价</span>
@@ -466,6 +466,10 @@ const maxSessions = computed(() => {
   return Math.min(...data.map(c => c.sessions))
 })
 
+function clearZero(e) {
+  if (e.target.value === '0' || e.target.value === 0) e.target.value = ''
+}
+
 function formatDate(d) {
   if (!d) return ''
   return new Date(d).toLocaleDateString('zh-CN')
@@ -709,6 +713,7 @@ function formatDate(d) {
 }
 .price-row .price-label { color: #6b6375; }
 .price-row .price-value { text-align: right; font-weight: 600; }
+.price-val-box { width: 70px; text-align: right; font-weight: 600; color: #4a9d7e; font-size: 13px; }
 .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; }