fix: 搜索过滤收藏、拼音首字母匹配、清除图片、滑动切换、通知已读

1. 搜索时收藏配方也按关键词过滤，不匹配的隐藏
2. 编辑配方添加精油时支持拼音首字母匹配（如xyc→薰衣草）
3. 品牌设置页清除图片立即保存到后端，不需点保存按钮
4. 左右滑动切换tab，轮播区域内滑动切换图片不触发tab切换
5. 通知列表每条未读通知加"已读"按钮，调用POST /api/notifications/{id}/read

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/RecipeDetailOverlay.vue

@@ -355,6 +355,7 @@ import { useDiaryStore } from '../stores/diary'
 import { api } from '../composables/useApi'
 import { showConfirm, showPrompt } from '../composables/useDialog'
 import { oilEn, recipeNameEn } from '../composables/useOilTranslation'
+import { matchesPinyinInitials } from '../composables/usePinyinMatch'
 // TagPicker replaced with inline tag editing
 
 const props = defineProps({
@@ -751,7 +752,7 @@ const filteredOilsForAdd = computed(() => {
   if (!q) return oilsStore.oilNames
   return oilsStore.oilNames.filter(n => {
     const en = oilEn(n).toLowerCase()
-    return n.includes(q) || en.startsWith(q) || en.includes(q)
+    return n.includes(q) || en.startsWith(q) || en.includes(q) || matchesPinyinInitials(n, q)
   })
 })
 

frontend/src/components/UserMenu.vue

@@ -28,7 +28,10 @@
         <div class="notif-list">
           <div v-for="n in notifications.slice(0, 20)" :key="n.id"
                class="notif-item" :class="{ unread: !n.is_read }">
-            <div class="notif-title">{{ n.title }}</div>
+            <div class="notif-item-header">
+              <div class="notif-title">{{ n.title }}</div>
+              <button v-if="!n.is_read" class="notif-mark-one" @click="markOneRead(n)">已读</button>
+            </div>
             <div v-if="n.body" class="notif-body">{{ n.body }}</div>
             <div class="notif-time">{{ formatTime(n.created_at) }}</div>
           </div>
@@ -105,6 +108,13 @@ async function submitBug() {
   }
 }
 
+async function markOneRead(n) {
+  try {
+    await api(`/api/notifications/${n.id}/read`, { method: 'POST', body: '{}' })
+    n.is_read = 1
+  } catch {}
+}
+
 async function markAllRead() {
   try {
     await api('/api/notifications/read-all', { method: 'POST', body: '{}' })
@@ -191,7 +201,14 @@ onMounted(loadNotifications)
   padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px;
 }
 .notif-item.unread { background: #fafafa; }
-.notif-title { font-weight: 500; color: #333; }
+.notif-item-header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
+.notif-title { font-weight: 500; color: #333; flex: 1; }
+.notif-mark-one {
+  background: none; border: 1px solid #ccc; border-radius: 6px;
+  font-size: 11px; color: #7a9e7e; cursor: pointer; padding: 2px 8px;
+  font-family: inherit; white-space: nowrap; flex-shrink: 0;
+}
+.notif-mark-one:hover { background: #f0faf5; border-color: #7a9e7e; }
 .notif-body { color: #888; font-size: 12px; margin-top: 2px; white-space: pre-line; }
 .notif-time { color: #bbb; font-size: 11px; margin-top: 2px; }
 .notif-empty { text-align: center; color: #ccc; padding: 16px; font-size: 13px; }