hera/oil-formula-calculator
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

UI: 价格值对齐输入框+点击清零
All checks were successful
PR Preview / teardown-preview (pull_request) Has been skipped
Details
Test / unit-test (push) Successful in 5s
Details
Test / build-check (push) Successful in 4s
Details
PR Preview / test (pull_request) Successful in 5s
Details
PR Preview / deploy-preview (pull_request) Successful in 14s
Details
Test / e2e-test (push) Successful in 49s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hera Zhao
2026-04-11 10:24:22 +00:00
parent c12590039b
commit c728bb7259
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/views/Projects.vue
View File

@@ -57,7 +57,7 @@
class="proj-name-input" class="proj-name-input"
@blur="saveProject" @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> </div>
<!-- Ingredients Table --> <!-- Ingredients Table -->
@@ -145,23 +145,23 @@
<h4>💰 价格计算</h4> <h4>💰 价格计算</h4>
<div class="price-row"> <div class="price-row">
<span class="price-label">原料成本</span> <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>
<div class="price-row"> <div class="price-row">
<span class="price-label">包装费用</span> <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>
<div class="price-row"> <div class="price-row">
<span class="price-label">人工费用</span> <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>
<div class="price-row"> <div class="price-row">
<span class="price-label">其他成本</span> <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>
<div class="price-row total"> <div class="price-row total">
<span class="price-label">总成本</span> <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>
<div class="price-row"> <div class="price-row">
<span class="price-label">售价</span> <span class="price-label">售价</span>
@@ -466,6 +466,10 @@ const maxSessions = computed(() => {
return Math.min(...data.map(c => c.sessions)) 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) { function formatDate(d) {
if (!d) return '' if (!d) return ''
return new Date(d).toLocaleDateString('zh-CN') return new Date(d).toLocaleDateString('zh-CN')
@@ -709,6 +713,7 @@ function formatDate(d) {
} }
.price-row .price-label { color: #6b6375; } .price-row .price-label { color: #6b6375; }
.price-row .price-value { text-align: right; font-weight: 600; } .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 .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, .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 .form-input-inline:focus, .price-row input[type="number"]:focus { border-color: #7ec6a4; }