diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index 3958584..fdb3803 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -170,7 +170,7 @@
         <div class="editor-section">
           <table class="editor-table">
             <thead>
-              <tr><th>精油</th><th>滴数</th><th>单价/滴</th><th>小计</th><th></th></tr>
+              <tr><th>成分</th><th>用量</th><th>单价</th><th>小计</th><th></th></tr>
             </thead>
             <tbody>
               <tr v-for="(ing, i) in editEoIngredients" :key="'eo-'+i">
@@ -180,8 +180,13 @@
                     <option v-for="name in oilsStore.oilNames" :key="name" :value="name">{{ name }}</option>
                   </select>
                 </td>
-                <td><input v-model.number="ing.drops" type="number" min="0.5" step="0.5" class="editor-drops" /></td>
-                <td class="ing-ppd">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil)) : '-' }}</td>
+                <td>
+                  <div class="drops-with-unit">
+                    <input v-model.number="ing.drops" type="number" min="0.5" step="0.5" class="editor-drops" />
+                    <span class="unit-hint">{{ oilsStore.unitLabel(ing.oil) }}</span>
+                  </div>
+                </td>
+                <td class="ing-ppd">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil)) : '-' }}/{{ oilsStore.unitLabel(ing.oil) }}</td>
                 <td class="ing-cost">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * (ing.drops || 0)) : '-' }}</td>
                 <td><button class="remove-row-btn" @click="editIngredients.splice(editIngredients.indexOf(ing), 1)">✕</button></td>
               </tr>
@@ -1703,6 +1708,8 @@ async function saveRecipe() {
 .editor-drops:focus {
   border-color: var(--sage, #7a9e7e);
 }
+.drops-with-unit { display: flex; align-items: center; gap: 2px; }
+.unit-hint { font-size: 11px; color: #b0aab5; white-space: nowrap; }
 
 .ing-ppd {
   font-size: 12px;
diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index f221778..fb681bc 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -146,9 +146,9 @@
             <div v-if="getMeta(name)?.retailPrice" class="oil-retail-line">¥{{ getMeta(name).retailPrice }}/瓶</div>
           </template>
           <template v-else>
-            <div class="oil-price-line">¥{{ oils.pricePerDrop(name).toFixed(2) }}<span class="oil-price-unit">{{ name === '植物空胶囊' ? '/颗' : '/滴' }}</span></div>
+            <div class="oil-price-line">¥{{ oils.pricePerDrop(name).toFixed(2) }}<span class="oil-price-unit">/{{ oils.unitLabel(name) }}</span></div>
             <div v-if="getMeta(name)?.retailPrice && getMeta(name)?.dropCount" class="oil-retail-line">
-              ¥{{ (getMeta(name).retailPrice / getMeta(name).dropCount).toFixed(2) }}{{ name === '植物空胶囊' ? '/颗' : '/滴' }}
+              ¥{{ (getMeta(name).retailPrice / getMeta(name).dropCount).toFixed(2) }}/{{ oils.unitLabel(name) }}
             </div>
           </template>
         </div>
@@ -172,7 +172,7 @@
               <div class="oil-card-price-info" v-if="getMeta(activeCardName)">
                 ¥ {{ (getMeta(activeCardName).bottlePrice || 0).toFixed(2) }}
                 <span v-if="oils.pricePerDrop(activeCardName)">
-                  &middot; ¥ {{ oils.pricePerDrop(activeCardName).toFixed(4) }}/滴
+                  &middot; ¥ {{ oils.pricePerDrop(activeCardName).toFixed(4) }}/{{ oils.unitLabel(activeCardName) }}
                 </span>
               </div>
             </div>
@@ -231,18 +231,18 @@
             <span class="detail-value">{{ getMeta(selectedOilName)?.bottlePrice != null ? ('¥ ' + getMeta(selectedOilName).bottlePrice.toFixed(2)) : '--' }}</span>
           </div>
           <div class="detail-row">
-            <span class="detail-label">总滴数</span>
-            <span class="detail-value">{{ getMeta(selectedOilName)?.dropCount || '--' }}</span>
+            <span class="detail-label">{{ oils.isMlUnit(selectedOilName) ? '总容量' : '总滴数' }}</span>
+            <span class="detail-value">{{ getMeta(selectedOilName)?.dropCount || '--' }}{{ oils.isMlUnit(selectedOilName) ? 'ml' : '' }}</span>
           </div>
           <div class="detail-row">
-            <span class="detail-label">每滴价格</span>
+            <span class="detail-label">每{{ oils.unitLabel(selectedOilName) }}价格</span>
             <span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + oils.pricePerDrop(selectedOilName).toFixed(4)) : '--' }}</span>
           </div>
           <div class="detail-row" v-if="getMeta(selectedOilName)?.retailPrice">
             <span class="detail-label">零售价</span>
             <span class="detail-value">¥ {{ getMeta(selectedOilName).retailPrice.toFixed(2) }}</span>
           </div>
-          <div class="detail-row">
+          <div v-if="!oils.isMlUnit(selectedOilName)" class="detail-row">
             <span class="detail-label">每ml价格</span>
             <span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + (oils.pricePerDrop(selectedOilName) * DROPS_PER_ML).toFixed(2)) : '--' }}</span>
           </div>
@@ -474,6 +474,7 @@ for (const [ml, drops] of Object.entries(VOLUME_OPTIONS)) {
 
 function volumeLabel(dropCount, name) {
   if (dropCount === 160) return '160颗'
+  if (oils.isMlUnit(name)) return dropCount + 'ml'
   return DROPS_TO_VOLUME[dropCount] || (dropCount + '滴')
 }
 
diff --git a/frontend/src/views/RecipeManager.vue b/frontend/src/views/RecipeManager.vue
index d72ff49..5808480 100644
--- a/frontend/src/views/RecipeManager.vue
+++ b/frontend/src/views/RecipeManager.vue
@@ -271,7 +271,7 @@
         <div class="editor-section">
           <table class="editor-table">
             <thead>
-              <tr><th>精油</th><th>滴数</th><th>单价/滴</th><th>小计</th><th></th></tr>
+              <tr><th>成分</th><th>用量</th><th>单价</th><th>小计</th><th></th></tr>
             </thead>
             <tbody>
               <tr v-for="(ing, i) in formEoIngredients" :key="'eo-'+i">
@@ -296,8 +296,13 @@
                     </div>
                   </div>
                 </td>
-                <td><input v-model.number="ing.drops" type="number" min="0.5" step="0.5" class="editor-drops" /></td>
-                <td class="ing-ppd">{{ ing.oil ? oils.fmtPrice(oils.pricePerDrop(ing.oil)) : '-' }}</td>
+                <td>
+                  <div class="drops-with-unit">
+                    <input v-model.number="ing.drops" type="number" min="0.5" step="0.5" class="editor-drops" />
+                    <span class="unit-hint">{{ oils.unitLabel(ing.oil) }}</span>
+                  </div>
+                </td>
+                <td class="ing-ppd">{{ ing.oil ? oils.fmtPrice(oils.pricePerDrop(ing.oil)) : '-' }}/{{ oils.unitLabel(ing.oil) }}</td>
                 <td class="ing-cost">{{ ing.oil && ing.drops ? oils.fmtPrice(oils.pricePerDrop(ing.oil) * ing.drops) : '-' }}</td>
                 <td><button class="remove-row-btn" @click="removeEoRow(i)">✕</button></td>
               </tr>
@@ -2081,6 +2086,8 @@ watch(() => recipeStore.recipes, () => {
 .editor-table td { padding: 6px 4px; border-bottom: 1px solid #f5f5f5; }
 .editor-drops { width: 65px; padding: 6px 8px; border: 1.5px solid #d4cfc7; border-radius: 8px; font-size: 13px; text-align: center; outline: none; font-family: inherit; }
 .editor-drops:focus { border-color: #7ec6a4; }
+.drops-with-unit { display: flex; align-items: center; gap: 2px; }
+.unit-hint { font-size: 11px; color: #b0aab5; white-space: nowrap; }
 .editor-input { padding: 8px 10px; border: 1.5px solid #d4cfc7; border-radius: 8px; font-size: 13px; outline: none; font-family: inherit; width: 100%; box-sizing: border-box; }
 .editor-input:focus { border-color: #7ec6a4; }
 .editor-textarea { width: 100%; padding: 8px 10px; border: 1.5px solid #d4cfc7; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; resize: vertical; box-sizing: border-box; }