From e30891d3d2c0b2de99d13b1184c92d9c41fe0acc Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Tue, 14 Apr 2026 17:11:50 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=9E=E7=B2=BE=E6=B2=B9=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=20=E2=80=94=20=E5=AE=B9=E9=87=8F=E8=BE=93=E5=85=A5=E6=A1=86+?=
 =?UTF-8?q?=E5=8D=95=E4=BD=8D=E4=B8=8B=E6=8B=89(ml/g/=E9=A2=97)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 编辑弹窗根据unit类型显示不同UI：精油用标准容量下拉，其他产品用数字+单位选择
- 标签"精油名称"/"产品名称"自动切换
- 保存时传unit参数

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

diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index 239f38a..df6d129 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -327,28 +327,45 @@
         </div>
         <div class="modal-body">
           <div class="form-group">
-            <label>精油名称</label>
-            <input v-model="editOilDisplayName" class="form-input" type="text" placeholder="精油名称" />
+            <label>{{ editUnit === 'drop' ? '精油名称' : '产品名称' }}</label>
+            <input v-model="editOilDisplayName" class="form-input" type="text" :placeholder="editUnit === 'drop' ? '精油名称' : '产品名称'" />
           </div>
           <div class="form-group">
             <label>英文名</label>
             <input v-model="editOilEnName" class="form-input" type="text" placeholder="English name" />
           </div>
-          <div class="form-group">
-            <label>容量</label>
-            <select v-model="editVolume" class="form-select">
-              <option value="2.5">2.5ml (46滴)</option>
-              <option value="5">5ml (93滴)</option>
-              <option value="10">10ml (186滴)</option>
-              <option value="15">15ml (280滴)</option>
-              <option value="115">115ml (2146滴)</option>
-              <option value="custom">自定义</option>
-            </select>
-          </div>
-          <div class="form-group" v-if="editVolume === 'custom'">
-            <label>自定义滴数</label>
-            <input v-model.number="editDropCount" class="form-input" type="number" />
-          </div>
+          <!-- 精油容量 -->
+          <template v-if="editUnit === 'drop'">
+            <div class="form-group">
+              <label>容量</label>
+              <select v-model="editVolume" class="form-select">
+                <option value="2.5">2.5ml (46滴)</option>
+                <option value="5">5ml (93滴)</option>
+                <option value="10">10ml (186滴)</option>
+                <option value="15">15ml (280滴)</option>
+                <option value="115">115ml (2146滴)</option>
+                <option value="custom">自定义</option>
+              </select>
+            </div>
+            <div class="form-group" v-if="editVolume === 'custom'">
+              <label>自定义滴数</label>
+              <input v-model.number="editDropCount" class="form-input" type="number" />
+            </div>
+          </template>
+          <!-- 其他产品容量 -->
+          <template v-else>
+            <div class="form-group">
+              <label>容量</label>
+              <div style="display:flex;gap:6px;align-items:center">
+                <input v-model.number="editProductAmount" class="form-input" type="number" min="1" style="flex:1" />
+                <select v-model="editProductUnit" class="form-select" style="width:70px">
+                  <option value="ml">ml</option>
+                  <option value="g">g</option>
+                  <option value="capsule">颗</option>
+                </select>
+              </div>
+            </div>
+          </template>
           <div class="form-group">
             <label>会员价 (¥)</label>
             <input v-model.number="editBottlePrice" class="form-input" type="number" />
@@ -468,6 +485,9 @@ const editVolume = ref('5')
 const editDropCount = ref(0)
 const editRetailPrice = ref(null)
 const editOilEnName = ref('')
+const editUnit = ref('drop')
+const editProductAmount = ref(null)
+const editProductUnit = ref('ml')
 const editCardEmoji = ref('')
 const editCardEffects = ref('')
 const editCardUsage = ref('')
@@ -727,6 +747,11 @@ function editOil(name) {
   editDropCount.value = dc
   editRetailPrice.value = meta?.retailPrice || null
   editOilEnName.value = meta?.enName || getEnglishName(name) || ''
+  editUnit.value = meta?.unit || 'drop'
+  if (editUnit.value !== 'drop') {
+    editProductAmount.value = dc
+    editProductUnit.value = editUnit.value
+  }
   // Load knowledge card if exists
   const card = getOilCard(name)
   editCardEmoji.value = card?.emoji || ''
@@ -752,12 +777,15 @@ async function saveEditOil() {
     if (newName && newName !== oldName) {
       await oils.deleteOil(oldName)
     }
+    const finalDropCount = editUnit.value !== 'drop' ? editProductAmount.value : dropCount
+    const finalUnit = editUnit.value !== 'drop' ? editProductUnit.value : null
     await oils.saveOil(
       newName || oldName,
       editBottlePrice.value,
-      dropCount,
+      finalDropCount,
       editRetailPrice.value,
-      editOilEnName.value.trim() || null
+      editOilEnName.value.trim() || null,
+      finalUnit
     )
     // Save knowledge card if any content provided
     const finalName = newName || oldName