From fdf9f4d5a851788208877faa4c2413bbecb9bdd6 Mon Sep 17 00:00:00 2001
From: kjqwer <2990346238@qq.com>
Date: Sun, 7 Dec 2025 22:07:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A2=84=E8=AE=BE=E8=BF=87?=
 =?UTF-8?q?=E5=A4=9A=E5=88=87=E6=8D=A2=E4=B8=BB=E9=A2=98=E5=8D=A1=E9=A1=BF?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E6=9B=B4=E6=94=B9=E9=A2=84=E8=AE=BE?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PresetDropdown.vue       |  20 +--
 src/components/PresetManager.vue        |  42 ++---
 src/components/icons/IconPresetType.vue | 154 ++++++++++++++++++
 src/components/preset/PresetList.vue    | 107 +++++++++---
 src/components/preset/TypeSelector.vue  | 207 ++++++++++++++++++++++++
 5 files changed, 475 insertions(+), 55 deletions(-)
 create mode 100644 src/components/icons/IconPresetType.vue
 create mode 100644 src/components/preset/TypeSelector.vue

diff --git a/src/components/PresetDropdown.vue b/src/components/PresetDropdown.vue
index 86efb19..f17037a 100644
--- a/src/components/PresetDropdown.vue
+++ b/src/components/PresetDropdown.vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { usePromptStore } from '../stores/promptStore';
 import type { PromptPreset, PresetType } from '../types';
 import NotificationToast from './NotificationToast.vue';
+import IconPresetType from './icons/IconPresetType.vue';
 
 const store = usePromptStore();
 
@@ -325,19 +326,6 @@ function importPreset(event: Event) {
   (event.target as HTMLInputElement).value = '';
 }
 
-function getTypeIcon(type: string) {
-  const icons: Record<string, string> = {
-    positive: '🪄',
-    negative: '⛔',
-    setting: '⚙️',
-    style: '🖌️',
-    character: '🧙',
-    scene: '🏞️',
-    custom: '🧩'
-  };
-  return icons[type] || '🧩';
-}
-
 function getTypeLabel(type: string) {
   const typeMap: Record<string, string> = {
     'positive': '正面',
@@ -513,12 +501,14 @@ onUnmounted(() => {
             <span class="pd-group-count">{{ group.presets.length }}</span>
           </div>
           
-          <div v-for="p in group.presets" :key="`${p.name}_${p.type}`" class="pd-item">
+          <div v-for="p in group.presets" :key="`${p.name}_${p.type}`" class="pd-item nav-btn">
             <template v-if="renamingPreset !== p.name">
               <div class="pd-item-main" @click="loadPreset(p.name)">
                 <div class="pd-item-header">
                   <div class="pd-item-title">
-                    <span class="pd-item-icon" :title="getTypeLabel(p.type)">{{ getTypeIcon(p.type) }}</span>
+                    <span class="pd-item-icon" :title="getTypeLabel(p.type)">
+                      <IconPresetType :type="p.type" width="16" height="16" />
+                    </span>
                     <span class="pd-item-name">{{ p.name }}</span>
                   </div>
                   <span class="pd-item-date">{{ formatDate(p.updatedAt) }}</span>
diff --git a/src/components/PresetManager.vue b/src/components/PresetManager.vue
index b9db6e8..fc5dfd3 100644
--- a/src/components/PresetManager.vue
+++ b/src/components/PresetManager.vue
@@ -6,6 +6,7 @@ import NotificationToast from './NotificationToast.vue';
 import PresetSidebar from './preset/PresetSidebar.vue';
 import PresetList from './preset/PresetList.vue';
 import FolderSelector from './preset/FolderSelector.vue';
+import TypeSelector from './preset/TypeSelector.vue';
 
 const store = usePromptStore();
 
@@ -55,14 +56,14 @@ function showNotification(message: string, type: 'success' | 'error' | 'info' =
 }
 
 // Preset Types
-const presetTypes: { value: PresetType; label: string; icon: string }[] = [
-  { value: 'positive', label: '正面提示词', icon: '🪄' },
-  { value: 'negative', label: '负面提示词', icon: '⛔' },
-  { value: 'setting', label: '设定标签', icon: '⚙️' },
-  { value: 'style', label: '风格样式', icon: '🖌️' },
-  { value: 'character', label: '角色人物', icon: '🧙' },
-  { value: 'scene', label: '场景环境', icon: '🏞️' },
-  { value: 'custom', label: '自定义', icon: '🧩' }
+const presetTypes: { value: PresetType; label: string }[] = [
+  { value: 'positive', label: '正面提示词' },
+  { value: 'negative', label: '负面提示词' },
+  { value: 'setting', label: '设定标签' },
+  { value: 'style', label: '风格样式' },
+  { value: 'character', label: '角色人物' },
+  { value: 'scene', label: '场景环境' },
+  { value: 'custom', label: '自定义' }
 ];
 
 // Computed
@@ -81,6 +82,11 @@ const folderTree = computed(() => {
   return buildTree(rootFolders);
 });
 
+const filterOptions = computed<{ value: PresetType | 'all'; label: string }[]>(() => [
+  { value: 'all', label: '所有类型' },
+  ...presetTypes
+]);
+
 const filteredPresets = computed(() => {
   let presets = store.extendedPresets || [];
   
@@ -677,12 +683,10 @@ onMounted(() => {
         </div>
 
         <div class="filter-group">
-          <select v-model="selectedType" class="type-select">
-            <option value="all">所有类型</option>
-            <option v-for="type in presetTypes" :key="type.value" :value="type.value">
-              {{ type.icon }} {{ type.label }}
-            </option>
-          </select>
+          <TypeSelector
+            v-model="selectedType"
+            :options="filterOptions"
+          />
         </div>
 
         <div class="action-group">
@@ -748,11 +752,11 @@ onMounted(() => {
           <div class="form-row">
             <div class="form-group">
               <label>类型</label>
-              <select v-model="presetForm.type">
-                <option v-for="t in presetTypes" :key="t.value" :value="t.value">
-                  {{ t.icon }} {{ t.label }}
-                </option>
-              </select>
+              <TypeSelector
+                :modelValue="presetForm.type"
+                @update:modelValue="val => presetForm.type = val as PresetType"
+                :options="presetTypes"
+              />
             </div>
             <div class="form-group">
               <label>文件夹</label>
diff --git a/src/components/icons/IconPresetType.vue b/src/components/icons/IconPresetType.vue
new file mode 100644
index 0000000..cf7f9da
--- /dev/null
+++ b/src/components/icons/IconPresetType.vue
@@ -0,0 +1,154 @@
+<template>
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+    class="icon-preset-type"
+    :class="type"
+  >
+    <!-- Positive: Sparkles/Magic -->
+    <template v-if="type === 'positive'">
+      <path class="star-main" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+    </template>
+
+    <!-- Negative: Ban/Stop -->
+    <template v-else-if="type === 'negative'">
+      <circle class="circle" cx="12" cy="12" r="10" />
+      <line class="slash" x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+    </template>
+
+    <!-- Setting: Gear -->
+    <template v-else-if="type === 'setting'">
+      <path class="gear" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L3.16 8.87c-.09.17-.05.39.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.09-.17.05-.39-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
+    </template>
+
+    <!-- Style: Brush -->
+    <template v-else-if="type === 'style'">
+      <path class="brush-handle" d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3z"/>
+      <path class="brush-tip" d="M20.71 4.63l-1.34-1.34a.996.996 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41z"/>
+    </template>
+
+    <!-- Character: User/Face -->
+    <template v-else-if="type === 'character'">
+      <path class="user-body" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle class="user-head" cx="12" cy="7" r="4" />
+    </template>
+
+    <!-- Scene: Image/Landscape -->
+    <template v-else-if="type === 'scene'">
+      <rect class="scene-frame" x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+      <circle class="scene-sun" cx="8.5" cy="8.5" r="1.5"/>
+      <polyline class="scene-mountain" points="21 15 16 10 5 21"/>
+    </template>
+
+    <!-- Custom: Puzzle -->
+    <template v-else>
+      <path class="puzzle-piece" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1 2.5 2.5 0 0 0 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5z"/>
+    </template>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import type { PresetType } from '../../types';
+
+defineProps<{
+  type: string | PresetType
+}>();
+</script>
+
+<style scoped>
+.icon-preset-type {
+  transition: all 0.3s ease;
+  overflow: visible;
+}
+
+/* Positive: Sparkle/Twinkle */
+.positive .star-main {
+  transform-origin: center;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+:deep(.nav-btn:hover) .positive .star-main,
+.positive:hover .star-main {
+  transform: scale(1.1) rotate(15deg);
+  fill: currentColor;
+  fill-opacity: 0.2;
+}
+
+/* Negative: Shake */
+.negative .slash {
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+:deep(.nav-btn:hover) .negative,
+.negative:hover {
+  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
+}
+@keyframes shake {
+  10%, 90% { transform: translate3d(-1px, 0, 0); }
+  20%, 80% { transform: translate3d(2px, 0, 0); }
+  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+  40%, 60% { transform: translate3d(4px, 0, 0); }
+}
+
+/* Setting: Rotate */
+.setting .gear {
+  transform-origin: center;
+  transition: transform 0.5s ease;
+}
+:deep(.nav-btn:hover) .setting .gear,
+.setting:hover .gear {
+  transform: rotate(90deg);
+}
+
+/* Style: Brush Wiggle */
+.style .brush-tip {
+  transform-origin: bottom left;
+  transition: transform 0.3s ease;
+}
+:deep(.nav-btn:hover) .style .brush-tip,
+.style:hover .brush-tip {
+  transform: rotate(-10deg) translateY(-2px);
+}
+
+/* Character: Bounce */
+.character .user-head {
+  transform-origin: center;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+:deep(.nav-btn:hover) .character .user-head,
+.character:hover .user-head {
+  transform: translateY(-2px);
+}
+
+/* Scene: Zoom */
+.scene .scene-mountain {
+  transform-origin: bottom;
+  transition: transform 0.3s ease;
+}
+.scene .scene-sun {
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+:deep(.nav-btn:hover) .scene .scene-mountain,
+.scene:hover .scene-mountain {
+  transform: scaleY(1.1);
+}
+:deep(.nav-btn:hover) .scene .scene-sun,
+.scene:hover .scene-sun {
+  transform: translateY(-2px) scale(1.1);
+}
+
+/* Custom: Puzzle Fit */
+.custom .puzzle-piece {
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+:deep(.nav-btn:hover) .custom .puzzle-piece,
+.custom:hover .puzzle-piece {
+  transform: scale(1.1) rotate(-5deg);
+}
+</style>
diff --git a/src/components/preset/PresetList.vue b/src/components/preset/PresetList.vue
index 31fd777..46dd2c5 100644
--- a/src/components/preset/PresetList.vue
+++ b/src/components/preset/PresetList.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
 import type { ExtendedPreset, PresetType } from '../../types';
+import IconPresetType from '../icons/IconPresetType.vue';
 
 const props = defineProps<{
   presets: ExtendedPreset[];
@@ -15,17 +16,73 @@ const emit = defineEmits<{
   (e: 'share', preset: ExtendedPreset): void;
 }>();
 
-function getTypeIcon(type: PresetType) {
-  const icons: Record<string, string> = {
-    positive: '🪄',
-    negative: '⛔',
-    setting: '⚙️',
-    style: '🖌️',
-    character: '🧙',
-    scene: '🏞️',
-    custom: '🧩'
-  };
-  return icons[type] || '🧩';
+// Lazy Loading Logic
+const PAGE_SIZE = 20;
+const displayLimit = ref(PAGE_SIZE);
+const containerRef = ref<HTMLElement | null>(null);
+const sentinelRef = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+const displayedPresets = computed(() => {
+  return props.presets.slice(0, displayLimit.value);
+});
+
+watch(() => props.presets, () => {
+  displayLimit.value = PAGE_SIZE;
+  if (containerRef.value) {
+    containerRef.value.scrollTop = 0;
+  }
+  // Reset observer if needed, but the sentinel remains or is recreated
+  nextTick(() => {
+    checkIntersection();
+  });
+});
+
+function checkIntersection() {
+  if (observer && sentinelRef.value) {
+    // Re-observe just in case
+    observer.disconnect();
+    observer.observe(sentinelRef.value);
+  }
+}
+
+onMounted(() => {
+  observer = new IntersectionObserver((entries) => {
+    if (entries[0] && entries[0].isIntersecting) {
+      loadMore();
+    }
+  }, {
+    root: containerRef.value,
+    rootMargin: '200px',
+    threshold: 0.1
+  });
+  
+  if (sentinelRef.value) {
+    observer.observe(sentinelRef.value);
+  }
+});
+
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+});
+
+// Watch sentinel ref changes (e.g. when switching from empty to having presets)
+watch(sentinelRef, (newEl) => {
+  if (observer) {
+    observer.disconnect();
+    if (newEl) {
+      observer.observe(newEl);
+    }
+  }
+});
+
+function loadMore() {
+  if (displayLimit.value < props.presets.length) {
+    displayLimit.value += PAGE_SIZE;
+  }
 }
 
 function getTypeLabel(type: PresetType) {
@@ -47,18 +104,19 @@ function formatDate(dateStr: string) {
 </script>
 
 <template>
-  <div class="preset-list-container">
+  <div class="preset-list-container" ref="containerRef">
     <div v-if="presets.length === 0" class="empty-state">
       <div class="empty-icon">📭</div>
       <p class="empty-text">暂无预设</p>
     </div>
 
-    <div v-else class="preset-grid">
-      <div v-for="preset in presets" :key="preset.id" class="preset-card">
-        <div class="card-header">
-          <div class="preset-type" :title="getTypeLabel(preset.type)">
-            {{ getTypeIcon(preset.type) }}
-          </div>
+    <template v-else>
+      <div class="preset-grid">
+        <div v-for="preset in displayedPresets" :key="preset.id" class="preset-card nav-btn">
+          <div class="card-header">
+            <div class="preset-type" :title="getTypeLabel(preset.type)">
+              <IconPresetType :type="preset.type" width="24" height="24" />
+            </div>
           <h4 class="preset-name" :title="preset.name">{{ preset.name }}</h4>
           <div class="preset-actions">
             <button @click="emit('apply', preset)" class="action-btn apply-btn" title="应用预设">
@@ -126,6 +184,8 @@ function formatDate(dateStr: string) {
         </div>
       </div>
     </div>
+    <div ref="sentinelRef" class="sentinel" style="height: 20px; width: 100%;"></div>
+  </template>
   </div>
 </template>
 
@@ -162,11 +222,13 @@ function formatDate(dateStr: string) {
   background-color: var(--color-bg-primary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
-  padding: 1rem;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
+  align-items: stretch;
   transition: all 0.2s ease;
   position: relative;
+  text-align: left;
 }
 
 .preset-card:hover {
@@ -183,8 +245,11 @@ function formatDate(dateStr: string) {
 
 .preset-type {
   font-size: 1.25rem;
-  margin-right: 0.75rem;
+  margin-right: 0.5rem;
   flex-shrink: 0;
+  line-height: 1;
+  display: flex;
+  align-items: center;
 }
 
 .preset-name {
diff --git a/src/components/preset/TypeSelector.vue b/src/components/preset/TypeSelector.vue
new file mode 100644
index 0000000..6993ade
--- /dev/null
+++ b/src/components/preset/TypeSelector.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import type { PresetType } from '../../types';
+import IconPresetType from '../icons/IconPresetType.vue';
+
+const props = defineProps<{
+  modelValue: PresetType | 'all';
+  options: { value: PresetType | 'all'; label: string }[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: PresetType | 'all'): void;
+}>();
+
+const isOpen = ref(false);
+const containerRef = ref<HTMLElement | null>(null);
+
+const selectedLabel = computed(() => {
+  const option = props.options.find(o => o.value === props.modelValue);
+  return option ? option.label : '所有类型';
+});
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+
+function select(value: PresetType | 'all') {
+  emit('update:modelValue', value);
+  isOpen.value = false;
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+    isOpen.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<template>
+  <div class="type-selector" ref="containerRef">
+    <button class="selector-btn nav-btn" @click="toggle" :class="{ active: isOpen }">
+      <div class="selected-content">
+        <IconPresetType v-if="modelValue !== 'all'" :type="modelValue" width="16" height="16" />
+        <span v-else class="all-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="7" height="7"></rect>
+            <rect x="14" y="3" width="7" height="7"></rect>
+            <rect x="14" y="14" width="7" height="7"></rect>
+            <rect x="3" y="14" width="7" height="7"></rect>
+          </svg>
+        </span>
+        <span>{{ selectedLabel }}</span>
+      </div>
+      <svg class="chevron" :class="{ rotated: isOpen }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </button>
+    
+    <Transition name="fade">
+      <div v-if="isOpen" class="options-list">
+        <button 
+          v-for="option in options" 
+          :key="option.value" 
+          class="option-item nav-btn"
+          :class="{ selected: modelValue === option.value }"
+          @click="select(option.value)"
+        >
+          <div class="option-icon">
+            <IconPresetType v-if="option.value !== 'all'" :type="option.value" width="16" height="16" />
+            <span v-else class="all-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="7" height="7"></rect>
+                <rect x="14" y="3" width="7" height="7"></rect>
+                <rect x="14" y="14" width="7" height="7"></rect>
+                <rect x="3" y="14" width="7" height="7"></rect>
+              </svg>
+            </span>
+          </div>
+          <span>{{ option.label }}</span>
+          <svg v-if="modelValue === option.value" class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.type-selector {
+  position: relative;
+  min-width: 140px;
+}
+
+.selector-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.selector-btn:hover, .selector-btn.active {
+  border-color: var(--color-border-hover);
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+}
+
+.selected-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chevron {
+  transition: transform 0.2s;
+  color: var(--color-text-tertiary);
+}
+
+.chevron.rotated {
+  transform: rotate(180deg);
+}
+
+.options-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 100%;
+  min-width: 160px;
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 50;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+
+.option-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem;
+  border: none;
+  background: none;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background-color 0.2s;
+  text-align: left;
+}
+
+.option-item:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.option-item.selected {
+  background-color: var(--color-bg-tertiary);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.option-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.5rem;
+  color: var(--color-text-secondary);
+}
+
+.all-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.check-icon {
+  margin-left: auto;
+  color: var(--color-accent);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+</style>