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 3s
Details
PR Preview / test (pull_request) Successful in 5s
Details
PR Preview / deploy-preview (pull_request) Successful in 13s
Details
Test / e2e-test (push) Successful in 54s
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:21:18 +00:00
parent a5178f83f9
commit c12590039b
1 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,7 +57,7 @@
class="proj-name-input" class="proj-name-input"
@blur="saveProject" @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> </div>
<!-- Ingredients Table --> <!-- Ingredients Table -->
@@ -174,21 +174,21 @@
</div> </div>
<div class="profit-col"> <div class="profit-col">
<h4>📊 利润分析</h4> <h4>📊 利润分析</h4>
<div class="profit-item"> <div class="profit-card">
<span class="profit-label">单件利润</span> <div class="profit-card-label">单件利润</div>
<span class="profit-value" :class="{ negative: unitProfit < 0 }">{{ oils.fmtPrice(unitProfit) }}</span> <div class="profit-card-value" :class="{ negative: unitProfit < 0 }">{{ oils.fmtPrice(unitProfit) }}</div>
</div> </div>
<div class="profit-item"> <div class="profit-card">
<span class="profit-label">利润率</span> <div class="profit-card-label">利润率</div>
<span class="profit-value" :class="{ negative: profitMargin < 0 }">{{ profitMargin.toFixed(1) }}%</span> <div class="profit-card-value" :class="{ negative: profitMargin < 0 }">{{ profitMargin.toFixed(1) }}%</div>
</div> </div>
<div class="profit-item"> <div class="profit-card">
<span class="profit-label">批量总利润</span> <div class="profit-card-label">批量总利润</div>
<span class="profit-value" :class="{ negative: batchProfit < 0 }">{{ oils.fmtPrice(batchProfit) }}</span> <div class="profit-card-value" :class="{ negative: batchProfit < 0 }">{{ oils.fmtPrice(batchProfit) }}</div>
</div> </div>
<div class="profit-item"> <div class="profit-card">
<span class="profit-label">批量总收入</span> <div class="profit-card-label">批量总收入</div>
<span class="profit-value">{{ oils.fmtPrice(batchRevenue) }}</span> <div class="profit-card-value">{{ oils.fmtPrice(batchRevenue) }}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -702,13 +702,16 @@ function formatDate(d) {
.price-row { .price-row {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 0; justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid #eae8e5; border-bottom: 1px solid #eae8e5;
font-size: 14px; font-size: 13px;
gap: 12px;
} }
.price-row .price-label { flex: 0 0 80px; } .price-row .price-label { color: #6b6375; }
.price-row .price-value, .price-row .price-input-wrap, .price-row .form-input-inline { flex: 1; } .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 { .price-row.total {
border-top: 2px solid #d4cfc7; 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; 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; } .pricing-col h4, .profit-col h4 { margin: 0 0 10px; font-size: 14px; color: #3e3a44; }
.profit-item { .profit-card {
display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #fff; border-radius: 10px;
padding: 8px 0; border-bottom: 1px solid #eae8e5; font-size: 14px; border: 1.5px solid #e5e4e7; text-align: center; margin-bottom: 6px;
} }
.profit-item:last-child { border-bottom: none; } .profit-card-label { font-size: 12px; color: #6b6375; margin-bottom: 2px; }
.profit-label { color: #6b6375; font-size: 13px; } .profit-card-value { font-size: 18px; font-weight: 700; color: #4a9d7e; }
.profit-value { font-size: 16px; font-weight: 700; color: #4a9d7e; } .profit-card-value.negative { color: #ef5350; }
.profit-value.negative { color: #ef5350; }
.notes-textarea { .notes-textarea {
width: 100%; width: 100%;