From a77aecba75429ab2d6584ddecbdc440d8f765333 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Thu, 9 Apr 2026 17:33:59 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=89=8B=E6=9C=BA=E7=89=88=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E/=E5=AF=BC=E5=87=BA=E6=8C=89=E9=92=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BAemoji=EF=BC=8C=E8=B7=9F=E8=A7=86=E5=9B=BE=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=90=8C=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

桌面: 显示文字按钮'＋ 新增''📥 导出PDF'
手机(@media max-width:480px): 隐藏文字按钮，显示 ➕ 📄 emoji按钮
搜索框min-width缩小到140px给按钮留空间

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/OilReference.vue | 34 ++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index 7a98caa..d54d8a4 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -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 {