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

feat: Header重排、共享配方到公共库、待审核配方、权限优化 #17

Merged
fam merged 39 commits from fix/ui-polish-round2 into main 2026-04-09 18:37:12 +00:00
Conversation 41 Commits 39 Files Changed 11 +31 -3
1 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a77aecba75 - Show all commits

34
frontend/src/views/OilReference.vue
View File

@@ -90,15 +90,19 @@
<!-- Search + View Toggle + Add + PDF -->
<div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
<div class="search-box" style="flex:1;min-width:180px;margin-bottom:0">
<div class="search-box" style="flex:1;min-width:140px;margin-bottom:0">
<input class="search-input" v-model="searchQuery" placeholder="搜索精油名称…" style="width:100%" />
</div>
<div style="display:flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;flex-shrink:0">
<button @click="viewMode = 'bottle'" :style="viewMode === 'bottle' ? 'background:var(--sage);color:white' : 'background:white;color:var(--text-mid)'" style="border:none;border-radius:0;font-size:12px;padding:6px 12px;cursor:pointer">每瓶价</button>
<button @click="viewMode = 'drop'" :style="viewMode === 'drop' ? 'background:var(--sage);color:white' : 'background:white;color:var(--text-mid)'" style="border:none;border-radius:0;font-size:12px;padding:6px 12px;cursor:pointer">每滴价</button>
</div>
<button v-if="auth.canEdit" class="btn btn-primary btn-sm" @click="showAddForm = !showAddForm">{{ showAddForm ? '收起' : '＋ 新增' }}</button>
<button v-if="auth.isAdmin" class="btn btn-gold btn-sm" @click="exportPDF" style="font-size:12px">📥 导出PDF</button>
<!-- Desktop: text buttons -->
<button v-if="auth.canEdit" class="toolbar-btn-text" @click="showAddForm = !showAddForm">{{ showAddForm ? '收起' : '＋ 新增' }}</button>
<button v-if="auth.isAdmin" class="toolbar-btn-text" @click="exportPDF">📥 导出PDF</button>
<!-- Mobile: emoji-only buttons -->
<button v-if="auth.canEdit" class="toolbar-btn-icon" @click="showAddForm = !showAddForm" title="新增精油">➕</button>
<button v-if="auth.isAdmin" class="toolbar-btn-icon" @click="exportPDF" title="导出PDF">📄</button>
</div>
<!-- Add Oil Form (toggleable) -->
@@ -1245,6 +1249,28 @@ async function saveCardImage(name) {
text-decoration: line-through;
white-space: nowrap;
}
/* Desktop: show text buttons, hide icon buttons */
.toolbar-btn-text {
padding: 7px 14px;
border-radius: 8px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
border: 1.5px solid var(--sage);
background: white;
color: var(--sage-dark);
white-space: nowrap;
}
.toolbar-btn-text:hover { background: var(--sage-mist); }
.toolbar-btn-icon {
display: none;
background: none;
border: none;
font-size: 18px;
cursor: pointer;
padding: 4px;
}
@media (max-width: 480px) {
.oil-name-line { font-size: 13px; }
.oil-en-line { font-size: 9px; }
@@ -1252,6 +1278,8 @@ async function saveCardImage(name) {
.oil-retail-line { font-size: 10px; }
.oils-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.oil-chip { padding: 10px 12px; }
.toolbar-btn-text { display: none; }
.toolbar-btn-icon { display: inline-block; }
}
.oil-chip-actions {