From 37087c72386cc4a31290aad63cb4cd5ef46ce848 Mon Sep 17 00:00:00 2001
From: kjqwer <2990346238@qq.com>
Date: Sat, 29 Nov 2025 09:03:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BE=8E=E5=8C=96-=E9=A2=84?=
 =?UTF-8?q?=E8=AE=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PresetDropdown.vue        |  282 +++--
 src/components/PresetManager.vue         | 1363 +++++++---------------
 src/components/PromptEditor.vue          |   19 +-
 src/components/PromptManager.vue         |  395 +++++--
 src/components/preset/FolderTreeItem.vue |  237 ++++
 src/components/preset/PresetList.vue     |  342 ++++++
 src/components/preset/PresetSidebar.vue  |  219 ++++
 src/style.css                            |   17 +-
 8 files changed, 1721 insertions(+), 1153 deletions(-)
 create mode 100644 src/components/preset/FolderTreeItem.vue
 create mode 100644 src/components/preset/PresetList.vue
 create mode 100644 src/components/preset/PresetSidebar.vue

diff --git a/src/components/PresetDropdown.vue b/src/components/PresetDropdown.vue
index 52e88d3..107c709 100644
--- a/src/components/PresetDropdown.vue
+++ b/src/components/PresetDropdown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { usePromptStore } from '../stores/promptStore';
-import type { PromptPreset } from '../types';
+import type { PromptPreset, PresetType } from '../types';
 import NotificationToast from './NotificationToast.vue';
 
 const store = usePromptStore();
@@ -48,21 +48,28 @@ const filteredPresets = computed(() => {
   const q = presetSearch.value.trim().toLowerCase();
   // 合并旧预设和新预设，优先显示新预设
   let list = [
-    ...store.extendedPresets.map(p => ({
-      name: p.name,
-      text: p.content,
-      updatedAt: p.updatedAt,
-      type: p.type,
-      description: p.description,
-      isExtended: true
-    })),
+    ...store.extendedPresets.map(p => {
+      const folder = p.folderId ? store.presetFolders.find(f => f.id === p.folderId) : null;
+      return {
+        name: p.name,
+        text: p.content,
+        updatedAt: p.updatedAt,
+        type: p.type,
+        description: p.description,
+        isExtended: true,
+        folderId: p.folderId,
+        folderName: folder ? folder.name : '未分类'
+      };
+    }),
     ...store.presets.map(p => ({
       name: p.name,
       text: p.text,
       updatedAt: p.updatedAt,
       type: 'positive' as const,
       description: undefined,
-      isExtended: false
+      isExtended: false,
+      folderId: null,
+      folderName: '未分类'
     }))
   ];
   
@@ -127,6 +134,31 @@ const filteredPresets = computed(() => {
   return list;
 });
 
+const groupedPresets = computed(() => {
+  const list = filteredPresets.value;
+  // 如果有搜索或者排序不是默认的，使用平铺列表（视为一个组）
+  if (presetSearch.value || sortBy.value !== 'date') {
+    return [{ name: presetSearch.value ? '搜索结果' : '所有预设', presets: list }];
+  }
+  
+  // 分组
+  const groups: Record<string, typeof list> = {};
+  list.forEach(p => {
+    const key = p.folderName || '未分类';
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(p);
+  });
+  
+  // 转换为数组并排序
+  return Object.entries(groups)
+    .map(([name, presets]) => ({ name, presets }))
+    .sort((a, b) => {
+      if (a.name === '未分类') return 1;
+      if (b.name === '未分类') return -1;
+      return a.name.localeCompare(b.name);
+    });
+});
+
 const presetStats = computed(() => {
   const totalOld = store.presets.length;
   const totalExtended = store.extendedPresets.length;
@@ -293,6 +325,19 @@ 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': '正面',
@@ -462,75 +507,79 @@ onUnmounted(() => {
           <span>{{ presetSearch ? '未找到匹配的预设' : '暂无预设' }}</span>
         </div>
         
-        <div v-for="p in filteredPresets" :key="`${p.name}_${p.type}`" class="pd-item">
-          <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-name">{{ p.name }}</span>
-                  <span v-if="p.isExtended" class="pd-item-type" :class="`type-${p.type}`">
-                    {{ getTypeLabel(p.type) }}
-                  </span>
-                </div>
-                <span class="pd-item-date">{{ formatDate(p.updatedAt) }}</span>
-              </div>
-              <div class="pd-item-preview">{{ getPresetPreview(p.text) }}</div>
-              <div v-if="p.description" class="pd-item-description">{{ p.description }}</div>
-            </div>
-            
-            <div class="pd-item-actions">
-              <button @click.stop="copyPresetToClipboard(p)" class="pd-action-btn" title="复制到剪贴板">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
-                  <path d="m5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-              <button @click.stop="exportPreset(p)" class="pd-action-btn" title="导出">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
-                  <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
-                  <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-              <button @click.stop="beginRename(p.name)" class="pd-action-btn" title="重命名">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
-                  <path d="m18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-              <button @click.stop="deletePreset(p)" class="pd-action-btn pd-delete" title="删除">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
-                  <path d="m19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-            </div>
-          </template>
+        <div v-for="group in groupedPresets" :key="group.name" class="pd-group">
+          <div v-if="groupedPresets.length > 1 || group.name !== '所有预设'" class="pd-group-header">
+            {{ group.name }}
+            <span class="pd-group-count">{{ group.presets.length }}</span>
+          </div>
           
-          <template v-else>
-            <div class="pd-rename-form">
-              <input 
-                v-model="renamingValue" 
-                @keyup.enter="commitRename" 
-                @keyup.escape="cancelRename"
-                @click.stop
-                class="pd-rename-input"
-              />
-              <div class="pd-rename-actions">
-                <button @click.stop="commitRename" class="pd-rename-confirm" title="确定">
+          <div v-for="p in group.presets" :key="`${p.name}_${p.type}`" class="pd-item">
+            <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-name">{{ p.name }}</span>
+                  </div>
+                  <span class="pd-item-date">{{ formatDate(p.updatedAt) }}</span>
+                </div>
+                <div class="pd-item-preview">{{ getPresetPreview(p.text) }}</div>
+              </div>
+              
+              <div class="pd-item-actions">
+                <button @click.stop="copyPresetToClipboard(p)" class="pd-action-btn" title="复制到剪贴板">
                   <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <polyline points="20,6 9,17 4,12" stroke="currentColor" stroke-width="2"/>
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
+                    <path d="m5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
                   </svg>
                 </button>
-                <button @click.stop="cancelRename" class="pd-rename-cancel" title="取消">
+                <button @click.stop="exportPreset(p)" class="pd-action-btn" title="导出">
                   <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2"/>
-                    <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2"/>
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
+                    <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
+                    <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
+                  </svg>
+                </button>
+                <button @click.stop="beginRename(p.name)" class="pd-action-btn" title="重命名">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
+                    <path d="m18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
+                  </svg>
+                </button>
+                <button @click.stop="deletePreset(p)" class="pd-action-btn pd-delete" title="删除">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
+                    <path d="m19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2"/>
                   </svg>
                 </button>
               </div>
-            </div>
-          </template>
+            </template>
+            
+            <template v-else>
+              <div class="pd-rename-form">
+                <input 
+                  v-model="renamingValue" 
+                  @keyup.enter="commitRename" 
+                  @keyup.escape="cancelRename"
+                  @click.stop
+                  class="pd-rename-input"
+                />
+                <div class="pd-rename-actions">
+                  <button @click.stop="commitRename" class="pd-rename-confirm" title="确定">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <polyline points="20,6 9,17 4,12" stroke="currentColor" stroke-width="2"/>
+                    </svg>
+                  </button>
+                  <button @click.stop="cancelRename" class="pd-rename-cancel" title="取消">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2"/>
+                      <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </template>
+          </div>
         </div>
       </div>
 
@@ -758,7 +807,7 @@ onUnmounted(() => {
 .pd-list {
   flex: 1;
   overflow-y: auto;
-  max-height: 300px;
+  max-height: 350px;
 }
 
 .pd-empty {
@@ -778,10 +827,33 @@ onUnmounted(() => {
   opacity: 0.5;
 }
 
+.pd-group-header {
+  padding: 0.5rem 1rem;
+  background-color: var(--color-bg-tertiary);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.pd-group-count {
+  background-color: var(--color-bg-primary);
+  padding: 0.125rem 0.375rem;
+  border-radius: 99px;
+  font-size: 0.6875rem;
+  color: var(--color-text-tertiary);
+}
+
 .pd-item {
   display: flex;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: 0.625rem 1rem;
   border-bottom: 1px solid var(--color-border);
   transition: all 0.2s ease;
 }
@@ -802,7 +874,7 @@ onUnmounted(() => {
 
 .pd-item-header {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   margin-bottom: 0.25rem;
 }
@@ -822,52 +894,14 @@ onUnmounted(() => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1;
 }
 
-.pd-item-type {
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--radius-sm);
-  font-size: 0.6875rem;
-  font-weight: 500;
+.pd-item-icon {
+  font-size: 1rem;
+  line-height: 1;
   flex-shrink: 0;
 }
 
-.pd-item-type.type-positive {
-  background-color: #dcfce7;
-  color: #166534;
-}
-
-.pd-item-type.type-negative {
-  background-color: #fee2e2;
-  color: #991b1b;
-}
-
-.pd-item-type.type-setting {
-  background-color: #e0e7ff;
-  color: #3730a3;
-}
-
-.pd-item-type.type-style {
-  background-color: #fef3c7;
-  color: #92400e;
-}
-
-.pd-item-type.type-character {
-  background-color: #f3e8ff;
-  color: #6b21a8;
-}
-
-.pd-item-type.type-scene {
-  background-color: #ecfdf5;
-  color: #047857;
-}
-
-.pd-item-type.type-custom {
-  background-color: #f1f5f9;
-  color: #475569;
-}
-
 .pd-item-date {
   font-size: 0.75rem;
   color: var(--color-text-tertiary);
@@ -878,29 +912,19 @@ onUnmounted(() => {
 .pd-item-preview {
   font-size: 0.75rem;
   color: var(--color-text-secondary);
-  line-height: 1.3;
+  line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0.25rem;
-}
-
-.pd-item-description {
-  font-size: 0.6875rem;
-  color: var(--color-text-tertiary);
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-style: italic;
+  opacity: 0.8;
 }
 
 .pd-item-actions {
   display: flex;
   gap: 0.25rem;
-  opacity: 0.7;
+  opacity: 0;
   transition: opacity 0.2s ease;
-  margin-left: 0.5rem;
+  margin-left: 0.75rem;
 }
 
 .pd-item:hover .pd-item-actions {
diff --git a/src/components/PresetManager.vue b/src/components/PresetManager.vue
index bad0bf8..93f3eb1 100644
--- a/src/components/PresetManager.vue
+++ b/src/components/PresetManager.vue
@@ -3,20 +3,25 @@ import { ref, computed, onMounted } from 'vue';
 import { usePromptStore } from '../stores/promptStore';
 import type { ExtendedPreset, PresetFolder, PresetType } from '../types';
 import NotificationToast from './NotificationToast.vue';
+import PresetSidebar from './preset/PresetSidebar.vue';
+import PresetList from './preset/PresetList.vue';
 
 const store = usePromptStore();
 
-// 组件状态
-const activeTab = ref<'presets' | 'folders'>('presets');
+// State
+const activeTab = ref<'presets' | 'folders'>('presets'); // Kept for compatibility if needed, but UI will be unified
 const selectedType = ref<PresetType | 'all'>('all');
 const searchQuery = ref('');
-const selectedFolder = ref<string | null>(null);
+const selectedFolderId = ref<string | null>(null);
+const expandedFolderIds = ref<Set<string>>(new Set());
+
+// Dialog State
 const showCreateDialog = ref(false);
 const showFolderDialog = ref(false);
 const editingPreset = ref<ExtendedPreset | null>(null);
 const editingFolder = ref<PresetFolder | null>(null);
 
-// 表单数据
+// Forms
 const presetForm = ref({
   name: '',
   type: 'positive' as PresetType,
@@ -33,7 +38,7 @@ const folderForm = ref({
   parentId: ''
 });
 
-// 通知
+// Notification
 const notification = ref<{ message: string; type: 'success' | 'error' | 'info'; show: boolean }>({ 
   message: '', 
   type: 'info', 
@@ -47,7 +52,7 @@ function showNotification(message: string, type: 'success' | 'error' | 'info' =
   }, 3000);
 }
 
-// 预设类型选项
+// Preset Types
 const presetTypes: { value: PresetType; label: string; icon: string }[] = [
   { value: 'positive', label: '正面提示词', icon: '👍' },
   { value: 'negative', label: '负面提示词', icon: '👎' },
@@ -58,38 +63,7 @@ const presetTypes: { value: PresetType; label: string; icon: string }[] = [
   { value: 'custom', label: '自定义', icon: '📝' }
 ];
 
-// 计算属性
-const filteredPresets = computed(() => {
-  let presets = store.extendedPresets || [];
-  
-  // 按类型过滤
-  if (selectedType.value !== 'all') {
-    presets = presets.filter(p => p.type === selectedType.value);
-  }
-  
-  // 按文件夹过滤
-  if (selectedFolder.value) {
-    presets = presets.filter(p => p.folderId === selectedFolder.value);
-  } else if (selectedFolder.value === '') {
-    // 显示未分类的预设
-    presets = presets.filter(p => !p.folderId);
-  }
-  // 如果 selectedFolder.value === null，则显示所有预设（不过滤）
-  
-  // 按搜索关键词过滤
-  if (searchQuery.value.trim()) {
-    const query = searchQuery.value.toLowerCase();
-    presets = presets.filter(p => 
-      p.name.toLowerCase().includes(query) ||
-      p.content.toLowerCase().includes(query) ||
-      p.description?.toLowerCase().includes(query) ||
-      p.tags?.some(tag => tag.toLowerCase().includes(query))
-    );
-  }
-  
-  return presets.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
-});
-
+// Computed
 const folderTree = computed(() => {
   const folders = store.presetFolders || [];
   const rootFolders = folders.filter(f => !f.parentId);
@@ -105,31 +79,37 @@ const folderTree = computed(() => {
   return buildTree(rootFolders);
 });
 
-// 展开/折叠状态
-const expandedFolderIds = ref<Set<string>>(new Set());
-
-function toggleFolderExpand(id: string) {
-  const set = new Set(expandedFolderIds.value);
-  if (set.has(id)) set.delete(id); else set.add(id);
-  expandedFolderIds.value = set;
-}
-
-// 计算后代 ID，用于筛选与排除循环
-function getDescendantIds(folderId: string): string[] {
-  const all = store.presetFolders || [];
-  const result: string[] = [];
-  function walk(id: string) {
-    const children = all.filter(f => f.parentId === id);
-    for (const c of children) {
-      result.push(c.id);
-      walk(c.id);
-    }
+const filteredPresets = computed(() => {
+  let presets = store.extendedPresets || [];
+  
+  // Filter by Type
+  if (selectedType.value !== 'all') {
+    presets = presets.filter(p => p.type === selectedType.value);
   }
-  walk(folderId);
-  return result;
-}
+  
+  // Filter by Folder
+  if (selectedFolderId.value) {
+    presets = presets.filter(p => p.folderId === selectedFolderId.value);
+  } else if (selectedFolderId.value === '') {
+    // Uncategorized
+    presets = presets.filter(p => !p.folderId);
+  }
+  // if null, show all
+  
+  // Filter by Search
+  if (searchQuery.value.trim()) {
+    const query = searchQuery.value.toLowerCase();
+    presets = presets.filter(p => 
+      p.name.toLowerCase().includes(query) ||
+      p.content.toLowerCase().includes(query) ||
+      p.description?.toLowerCase().includes(query) ||
+      p.tags?.some(tag => tag.toLowerCase().includes(query))
+    );
+  }
+  
+  return presets.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
+});
 
-// 扁平化文件夹用于选择（面包屑路径标签）
 const flattenedFolders = computed(() => {
   type FlatItem = { id: string; name: string; label: string; level: number; presetCount: number; hasChildren: boolean };
   const res: FlatItem[] = [];
@@ -153,35 +133,102 @@ const flattenedFolders = computed(() => {
   return res;
 });
 
-// 父文件夹可选项（编辑时排除自身及其所有子孙）
+// Parent options for folder dialog (exclude self and children)
 const flattenedParentOptions = computed(() => {
   const exclude = new Set<string>();
   if (editingFolder.value) {
     exclude.add(editingFolder.value.id);
-    getDescendantIds(editingFolder.value.id).forEach(id => exclude.add(id));
+    
+    // Helper to find descendants
+    const all = store.presetFolders || [];
+    function walk(id: string) {
+      const children = all.filter(f => f.parentId === id);
+      for (const c of children) {
+        exclude.add(c.id);
+        walk(c.id);
+      }
+    }
+    walk(editingFolder.value.id);
   }
   return flattenedFolders.value.filter(f => !exclude.has(f.id));
 });
 
-// 可见的文件夹树列表（尊重展开状态）
-const visibleFolderList = computed(() => {
-  type VisibleItem = { node: any; level: number; hasChildren: boolean; expanded: boolean };
-  const res: VisibleItem[] = [];
-  function walk(nodes: any[], level: number) {
-    nodes.forEach((node: any) => {
-      const hasChildren = !!(node.children && node.children.length);
-      const expanded = expandedFolderIds.value.has(node.id);
-      res.push({ node, level, hasChildren, expanded });
-      if (hasChildren && expanded) {
-        walk(node.children, level + 1);
-      }
-    });
-  }
-  walk(folderTree.value, 0);
-  return res;
-});
+const allPresetsCount = computed(() => (store.extendedPresets || []).length);
+const uncategorizedCount = computed(() => (store.extendedPresets || []).filter(p => !p.folderId).length);
+
+// Actions
+function handleFolderSelect(id: string | null) {
+  selectedFolderId.value = id;
+}
+
+function handleToggleExpand(id: string) {
+  const set = new Set(expandedFolderIds.value);
+  if (set.has(id)) set.delete(id); else set.add(id);
+  expandedFolderIds.value = set;
+}
+
+function createFolder(parentId?: string) {
+  resetFolderForm();
+  if (parentId) {
+    folderForm.value.parentId = parentId;
+  }
+  showFolderDialog.value = true;
+}
+
+function editFolder(folder: PresetFolder) {
+  editingFolder.value = folder;
+  folderForm.value = {
+    name: folder.name,
+    description: folder.description || '',
+    color: folder.color || '#6366f1',
+    parentId: folder.parentId || ''
+  };
+  showFolderDialog.value = true;
+}
+
+function saveFolder() {
+  if (!folderForm.value.name.trim()) {
+    showNotification('请填写文件夹名称', 'error');
+    return;
+  }
+  
+  const folderData = {
+    name: folderForm.value.name.trim(),
+    description: folderForm.value.description.trim() || undefined,
+    color: folderForm.value.color,
+    parentId: folderForm.value.parentId || undefined
+  };
+  
+  if (editingFolder.value) {
+    store.updatePresetFolder(editingFolder.value.id, folderData);
+    showNotification(`文件夹「${folderData.name}」已更新`, 'success');
+  } else {
+    store.createPresetFolder(folderData);
+    showNotification(`文件夹「${folderData.name}」已创建`, 'success');
+  }
+  
+  closeFolderDialog();
+}
+
+function deleteFolder(folder: PresetFolder) {
+  const presetCount = (store.extendedPresets || []).filter(p => p.folderId === folder.id).length;
+  if (presetCount > 0) {
+    if (!confirm(`文件夹「${folder.name}」中有 ${presetCount} 个预设，删除后这些预设将移动到未分类。确定删除吗？`)) {
+      return;
+    }
+  } else {
+    if (!confirm(`确定删除文件夹「${folder.name}」吗？`)) {
+      return;
+    }
+  }
+  
+  store.deletePresetFolder(folder.id);
+  if (selectedFolderId.value === folder.id) {
+    selectedFolderId.value = null;
+  }
+  showNotification(`文件夹「${folder.name}」已删除`, 'info');
+}
 
-// 预设操作
 function createPreset() {
   resetPresetForm();
   showCreateDialog.value = true;
@@ -247,105 +294,7 @@ function applyPreset(preset: ExtendedPreset) {
   showNotification(`已应用预设「${preset.name}」`, 'success');
 }
 
-// 文件夹操作
-function createFolder() {
-  resetFolderForm();
-  showFolderDialog.value = true;
-}
-
-function editFolder(folder: PresetFolder) {
-  editingFolder.value = folder;
-  folderForm.value = {
-    name: folder.name,
-    description: folder.description || '',
-    color: folder.color || '#6366f1',
-    parentId: folder.parentId || ''
-  };
-  showFolderDialog.value = true;
-}
-
-function saveFolder() {
-  if (!folderForm.value.name.trim()) {
-    showNotification('请填写文件夹名称', 'error');
-    return;
-  }
-  
-  const folderData = {
-    name: folderForm.value.name.trim(),
-    description: folderForm.value.description.trim() || undefined,
-    color: folderForm.value.color,
-    parentId: folderForm.value.parentId || undefined
-  };
-  
-  if (editingFolder.value) {
-    store.updatePresetFolder(editingFolder.value.id, folderData);
-    showNotification(`文件夹「${folderData.name}」已更新`, 'success');
-  } else {
-    store.createPresetFolder(folderData);
-    showNotification(`文件夹「${folderData.name}」已创建`, 'success');
-  }
-  
-  closeFolderDialog();
-}
-
-function deleteFolder(folder: PresetFolder) {
-  const presetCount = (store.extendedPresets || []).filter(p => p.folderId === folder.id).length;
-  if (presetCount > 0) {
-    if (!confirm(`文件夹「${folder.name}」中有 ${presetCount} 个预设，删除后这些预设将移动到未分类。确定删除吗？`)) {
-      return;
-    }
-  }
-  
-  store.deletePresetFolder(folder.id);
-  showNotification(`文件夹「${folder.name}」已删除`, 'info');
-}
-
-// 工具函数
-function resetPresetForm() {
-  presetForm.value = {
-    name: '',
-    type: 'positive',
-    content: '',
-    description: '',
-    tags: '',
-    folderId: selectedFolder.value || ''
-  };
-  editingPreset.value = null;
-}
-
-function resetFolderForm() {
-  folderForm.value = {
-    name: '',
-    description: '',
-    color: '#6366f1',
-    parentId: ''
-  };
-  editingFolder.value = null;
-}
-
-function closePresetDialog() {
-  showCreateDialog.value = false;
-  resetPresetForm();
-}
-
-function closeFolderDialog() {
-  showFolderDialog.value = false;
-  resetFolderForm();
-}
-
-function getTypeLabel(type: PresetType) {
-  return presetTypes.find(t => t.value === type)?.label || type;
-}
-
-function getTypeIcon(type: PresetType) {
-  return presetTypes.find(t => t.value === type)?.icon || '📝';
-}
-
-function formatDate(dateStr: string) {
-  return new Date(dateStr).toLocaleString('zh-CN');
-}
-
-// 导入导出
+// Import/Export
 function exportPresets() {
   try {
     const jsonData = store.exportPresetsToJson();
@@ -386,333 +335,232 @@ function importPresets(event: Event) {
   };
   reader.readAsText(file);
   
-  // 清空文件输入
   (event.target as HTMLInputElement).value = '';
 }
 
+// Helpers
+function resetPresetForm() {
+  presetForm.value = {
+    name: '',
+    type: 'positive',
+    content: '',
+    description: '',
+    tags: '',
+    folderId: selectedFolderId.value && selectedFolderId.value !== '' ? selectedFolderId.value : ''
+  };
+  editingPreset.value = null;
+}
+
+function resetFolderForm() {
+  folderForm.value = {
+    name: '',
+    description: '',
+    color: '#6366f1',
+    parentId: ''
+  };
+  editingFolder.value = null;
+}
+
+function closePresetDialog() {
+  showCreateDialog.value = false;
+  resetPresetForm();
+}
+
+function closeFolderDialog() {
+  showFolderDialog.value = false;
+  resetFolderForm();
+}
+
 onMounted(() => {
-  // 初始化扩展预设管理
   store.initializeExtendedPresets();
 });
 </script>
 
 <template>
   <div class="preset-manager">
-    <!-- 头部工具栏 -->
-    <div class="pm-header">
-      <div class="pm-tabs">
-        <button 
-          :class="{ active: activeTab === 'presets' }" 
-          @click="activeTab = 'presets'"
-        >
-          📋 预设管理
-        </button>
-        <button 
-          :class="{ active: activeTab === 'folders' }" 
-          @click="activeTab = 'folders'"
-        >
-          📁 文件夹
-        </button>
-      </div>
-      
-      <div class="pm-actions">
-        <button @click="createPreset" class="pm-btn-primary" title="创建新预设">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
-            <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
-          </svg>
-          新建预设
-        </button>
-        <button @click="createFolder" class="pm-btn-secondary" title="创建文件夹">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="2"/>
-            <line x1="12" y1="11" x2="12" y2="17" stroke="currentColor" stroke-width="2"/>
-            <line x1="9" y1="14" x2="15" y2="14" stroke="currentColor" stroke-width="2"/>
-          </svg>
-        </button>
-        <div class="pm-import-export">
-          <button @click="exportPresets" class="pm-btn-secondary" title="导出预设">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
-              <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
-              <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
-            </svg>
-          </button>
-          <label class="pm-btn-secondary" title="导入预设">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
-              <polyline points="17,8 12,3 7,8" stroke="currentColor" stroke-width="2"/>
-              <line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2"/>
-            </svg>
-            <input type="file" accept=".json" @change="importPresets" style="display: none;">
-          </label>
-        </div>
-      </div>
+    <!-- Left Sidebar -->
+    <div class="pm-sidebar">
+      <PresetSidebar
+        :folder-tree="folderTree"
+        :selected-folder-id="selectedFolderId"
+        :expanded-ids="expandedFolderIds"
+        :all-count="allPresetsCount"
+        :uncategorized-count="uncategorizedCount"
+        @update:selected-folder-id="handleFolderSelect"
+        @toggle-expand="handleToggleExpand"
+        @create-folder="createFolder()"
+        @create-sub-folder="createFolder"
+        @edit-folder="editFolder"
+        @delete-folder="deleteFolder"
+      />
     </div>
 
-    <!-- 预设管理标签页 -->
-    <div v-if="activeTab === 'presets'" class="pm-content">
-      <!-- 过滤器 -->
-      <div class="pm-filters">
-        <div class="pm-search">
+    <!-- Right Content -->
+    <div class="pm-main">
+      <div class="pm-toolbar">
+        <div class="search-box">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
             <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
           </svg>
           <input v-model="searchQuery" placeholder="搜索预设..." />
         </div>
-        
-        <select v-model="selectedType" class="pm-type-filter">
-          <option value="all">所有类型</option>
-          <option v-for="type in presetTypes" :key="type.value" :value="type.value">
-            {{ type.icon }} {{ type.label }}
-          </option>
-        </select>
-        
-        <select v-model="selectedFolder" class="pm-folder-filter">
-          <option :value="null">所有预设</option>
-          <option value="">未分类</option>
-          <option v-for="f in flattenedFolders" :key="f.id" :value="f.id">
-            📁 {{ f.label }} ({{ f.presetCount }})
-          </option>
-        </select>
-      </div>
 
-      <!-- 预设列表 -->
-      <div class="pm-preset-list">
-        <div v-if="filteredPresets.length === 0" class="pm-empty">
-          <div class="pm-empty-icon">📝</div>
-          <div class="pm-empty-text">
-            {{ searchQuery ? '未找到匹配的预设' : '暂无预设，点击上方按钮创建第一个预设' }}
-          </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>
         </div>
-        
-        <div v-for="preset in filteredPresets" :key="preset.id" class="pm-preset-item">
-          <div class="pm-preset-header">
-            <div class="pm-preset-info">
-              <span class="pm-preset-type">{{ getTypeIcon(preset.type) }}</span>
-              <div class="pm-preset-title">
-                <h4>{{ preset.name }}</h4>
-                <span class="pm-preset-meta">{{ getTypeLabel(preset.type) }} · {{ formatDate(preset.updatedAt) }}</span>
-              </div>
-            </div>
-            <div class="pm-preset-actions">
-              <button @click="applyPreset(preset)" class="pm-action-btn pm-apply" title="应用预设">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <polyline points="20,6 9,17 4,12" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-              <button @click="copyPresetContent(preset)" class="pm-action-btn" title="复制内容到剪贴板">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
-                  <path d="m5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-              <button @click="editPreset(preset)" class="pm-action-btn" title="编辑预设">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
-                  <path d="m18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-              <button @click="deletePreset(preset)" class="pm-action-btn pm-delete" title="删除预设">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
-                  <path d="m19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-            </div>
-          </div>
-          
-          <div v-if="preset.description" class="pm-preset-description">
-            {{ preset.description }}
-          </div>
-          
-          <div class="pm-preset-content">
-            {{ preset.content }}
-          </div>
-          
-          <div v-if="preset.tags && preset.tags.length" class="pm-preset-tags">
-            <span v-for="tag in preset.tags" :key="tag" class="pm-tag">{{ tag }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
 
-    <!-- 文件夹管理标签页 -->
-    <div v-if="activeTab === 'folders'" class="pm-content">
-      <!-- 文件夹统计信息 -->
-      <div class="pm-folder-stats">
-        <div class="pm-stat-card">
-          <div class="pm-stat-icon">📁</div>
-          <div class="pm-stat-info">
-            <div class="pm-stat-number">{{ folderTree.length }}</div>
-            <div class="pm-stat-label">文件夹总数</div>
-          </div>
-        </div>
-        <div class="pm-stat-card">
-          <div class="pm-stat-icon">📋</div>
-          <div class="pm-stat-info">
-            <div class="pm-stat-number">{{ (store.extendedPresets || []).length }}</div>
-            <div class="pm-stat-label">预设总数</div>
-          </div>
-        </div>
-        <div class="pm-stat-card">
-          <div class="pm-stat-icon">📂</div>
-          <div class="pm-stat-info">
-            <div class="pm-stat-number">{{ (store.extendedPresets || []).filter(p => !p.folderId).length }}</div>
-            <div class="pm-stat-label">未分类预设</div>
-          </div>
-        </div>
-      </div>
-      
-      <div class="pm-folder-list">
-        <div v-if="folderTree.length === 0" class="pm-empty">
-          <div class="pm-empty-icon">📁</div>
-          <div class="pm-empty-text">
-            <h3>暂无文件夹</h3>
-            <p>创建文件夹来组织您的预设</p>
-            <p>点击上方的"新建文件夹"按钮开始</p>
-          </div>
-        </div>
-        
-        <div v-for="item in visibleFolderList" :key="item.node.id" class="pm-folder-item">
-          <div class="pm-folder-header" :style="{ paddingLeft: `${item.level * 16}px` }">
-            <button v-if="item.hasChildren" @click="toggleFolderExpand(item.node.id)" class="pm-expander" :title="item.expanded ? '折叠' : '展开'">
-              <span>{{ item.expanded ? '▼' : '▶' }}</span>
+        <div class="action-group">
+          <button @click="createPreset" class="btn-primary">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
+              <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
+            </svg>
+            新建预设
+          </button>
+          
+          <div class="import-export">
+            <button @click="exportPresets" class="btn-icon" title="导出预设">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
+                <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
+                <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
+              </svg>
             </button>
-            <div class="pm-folder-info">
-              <div class="pm-folder-icon" :style="{ backgroundColor: item.node.color }">📁</div>
-              <div class="pm-folder-details">
-                <h4>{{ item.node.name }}</h4>
-                <span class="pm-folder-meta">{{ item.node.presetCount }} 个预设 · {{ formatDate(item.node.updatedAt) }}</span>
-              </div>
-            </div>
-            <div class="pm-folder-actions">
-              <button @click="editFolder(item.node)" class="pm-action-btn" title="编辑文件夹">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
-                  <path d="m18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-              <button @click="deleteFolder(item.node)" class="pm-action-btn pm-delete" title="删除文件夹">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
-                  <path d="m19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2"/>
-                </svg>
-              </button>
-            </div>
-          </div>
-          
-          <div v-if="item.node.description" class="pm-folder-description">
-            {{ item.node.description }}
+            <label class="btn-icon" title="导入预设">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
+                <polyline points="17,8 12,3 7,8" stroke="currentColor" stroke-width="2"/>
+                <line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2"/>
+              </svg>
+              <input type="file" accept=".json" @change="importPresets" style="display: none;">
+            </label>
           </div>
         </div>
       </div>
+
+      <div class="pm-content-area">
+        <PresetList
+          :presets="filteredPresets"
+          :search-query="searchQuery"
+          @apply="applyPreset"
+          @edit="editPreset"
+          @delete="deletePreset"
+          @copy="copyPresetContent"
+        />
+      </div>
     </div>
 
-    <!-- 创建/编辑预设对话框 -->
-    <div v-if="showCreateDialog" class="pm-modal-overlay" @click="closePresetDialog">
-      <div class="pm-modal" @click.stop>
-        <div class="pm-modal-header">
-          <h3>{{ editingPreset ? '编辑预设' : '创建预设' }}</h3>
-          <button @click="closePresetDialog" class="pm-modal-close">×</button>
+    <!-- Create/Edit Preset Modal -->
+    <div v-if="showCreateDialog" class="modal-overlay" @click.self="closePresetDialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3>{{ editingPreset ? '编辑预设' : '新建预设' }}</h3>
+          <button @click="closePresetDialog" class="close-btn">×</button>
         </div>
-        
-        <div class="pm-modal-body">
-          <div class="pm-form-group">
-            <label>预设名称 *</label>
-            <input v-model="presetForm.name" placeholder="输入预设名称..." />
+        <div class="modal-body">
+          <div class="form-group">
+            <label>名称</label>
+            <input v-model="presetForm.name" placeholder="给预设起个名字" />
           </div>
           
-          <div class="pm-form-row">
-            <div class="pm-form-group">
-              <label>预设类型</label>
+          <div class="form-row">
+            <div class="form-group">
+              <label>类型</label>
               <select v-model="presetForm.type">
-                <option v-for="type in presetTypes" :key="type.value" :value="type.value">
-                  {{ type.icon }} {{ type.label }}
+                <option v-for="t in presetTypes" :key="t.value" :value="t.value">
+                  {{ t.icon }} {{ t.label }}
                 </option>
               </select>
             </div>
-            
-            <div class="pm-form-group">
-              <label>所属文件夹</label>
+            <div class="form-group">
+              <label>文件夹</label>
               <select v-model="presetForm.folderId">
-                <option value="">未分类</option>
+                <option value="">(无 - 未分类)</option>
                 <option v-for="f in flattenedFolders" :key="f.id" :value="f.id">
-                  📁 {{ f.label }}
+                  {{ f.label }}
                 </option>
               </select>
             </div>
           </div>
           
-          <div class="pm-form-group">
-            <label>预设内容 *</label>
-            <textarea v-model="presetForm.content" placeholder="输入预设内容..." rows="6"></textarea>
+          <div class="form-group">
+            <label>内容</label>
+            <textarea v-model="presetForm.content" rows="5" placeholder="预设的提示词内容..."></textarea>
           </div>
           
-          <div class="pm-form-group">
-            <label>描述</label>
-            <textarea v-model="presetForm.description" placeholder="输入预设描述..." rows="2"></textarea>
+          <div class="form-group">
+            <label>描述 (选填)</label>
+            <input v-model="presetForm.description" placeholder="简短描述" />
           </div>
           
-          <div class="pm-form-group">
-            <label>标签</label>
-            <input v-model="presetForm.tags" placeholder="输入标签，用逗号分隔..." />
+          <div class="form-group">
+            <label>标签 (选填，逗号分隔)</label>
+            <input v-model="presetForm.tags" placeholder="tag1, tag2, tag3" />
           </div>
         </div>
-        
-        <div class="pm-modal-footer">
-          <button @click="closePresetDialog" class="pm-btn-secondary">取消</button>
-          <button @click="savePreset" class="pm-btn-primary">{{ editingPreset ? '更新' : '创建' }}</button>
+        <div class="modal-footer">
+          <button @click="closePresetDialog" class="btn-secondary">取消</button>
+          <button @click="savePreset" class="btn-primary">保存</button>
         </div>
       </div>
     </div>
 
-    <!-- 创建/编辑文件夹对话框 -->
-    <div v-if="showFolderDialog" class="pm-modal-overlay" @click="closeFolderDialog">
-      <div class="pm-modal" @click.stop>
-        <div class="pm-modal-header">
-          <h3>{{ editingFolder ? '编辑文件夹' : '创建文件夹' }}</h3>
-          <button @click="closeFolderDialog" class="pm-modal-close">×</button>
+    <!-- Create/Edit Folder Modal -->
+    <div v-if="showFolderDialog" class="modal-overlay" @click.self="closeFolderDialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3>{{ editingFolder ? '编辑文件夹' : '新建文件夹' }}</h3>
+          <button @click="closeFolderDialog" class="close-btn">×</button>
         </div>
-        
-        <div class="pm-modal-body">
-          <div class="pm-form-group">
-            <label>文件夹名称 *</label>
-            <input v-model="folderForm.name" placeholder="输入文件夹名称..." />
+        <div class="modal-body">
+          <div class="form-group">
+            <label>名称</label>
+            <input v-model="folderForm.name" placeholder="文件夹名称" />
           </div>
           
-          <div class="pm-form-row">
-            <div class="pm-form-group">
-              <label>颜色</label>
-              <input v-model="folderForm.color" type="color" />
-            </div>
-            
-            <div class="pm-form-group">
-              <label>父文件夹</label>
-              <select v-model="folderForm.parentId">
-                <option value="">根目录</option>
-                <option v-for="f in flattenedParentOptions" :key="f.id" :value="f.id">
-                  📁 {{ f.label }}
-                </option>
-              </select>
-            </div>
+          <div class="form-group">
+            <label>父文件夹</label>
+            <select v-model="folderForm.parentId">
+              <option value="">(无 - 根文件夹)</option>
+              <option v-for="f in flattenedParentOptions" :key="f.id" :value="f.id">
+                {{ f.label }}
+              </option>
+            </select>
           </div>
           
-          <div class="pm-form-group">
-            <label>描述</label>
-            <textarea v-model="folderForm.description" placeholder="输入文件夹描述..." rows="3"></textarea>
+          <div class="form-group">
+            <label>描述 (选填)</label>
+            <input v-model="folderForm.description" placeholder="简短描述" />
+          </div>
+          
+          <div class="form-group">
+            <label>颜色标记</label>
+            <div class="color-picker">
+              <div 
+                v-for="color in ['#6366f1', '#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899', '#64748b']" 
+                :key="color"
+                class="color-option"
+                :style="{ backgroundColor: color }"
+                :class="{ active: folderForm.color === color }"
+                @click="folderForm.color = color"
+              ></div>
+            </div>
           </div>
         </div>
-        
-        <div class="pm-modal-footer">
-          <button @click="closeFolderDialog" class="pm-btn-secondary">取消</button>
-          <button @click="saveFolder" class="pm-btn-primary">{{ editingFolder ? '更新' : '创建' }}</button>
+        <div class="modal-footer">
+          <button @click="closeFolderDialog" class="btn-secondary">取消</button>
+          <button @click="saveFolder" class="btn-primary">保存</button>
         </div>
       </div>
     </div>
 
-    <!-- 通知组件 -->
+    <!-- Toast Notification -->
     <NotificationToast 
       :message="notification.message"
       :type="notification.type"
@@ -724,115 +572,45 @@ onMounted(() => {
 <style scoped>
 .preset-manager {
   display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--color-bg-primary);
-}
-
-.pm-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid var(--color-border);
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.pm-tabs {
-  display: flex;
-  gap: 0.25rem;
-  background-color: var(--color-bg-secondary);
-  padding: 0.25rem;
-  border-radius: var(--radius-md);
-}
-
-.pm-tabs button {
-  padding: 0.5rem 1rem;
-  border: none;
-  background: transparent;
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-.pm-tabs button.active {
-  background-color: var(--color-accent);
-  color: white;
-  box-shadow: var(--shadow-sm);
-}
-
-.pm-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.pm-import-export {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.pm-btn-primary, .pm-btn-secondary {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  line-height: 1;
-}
-
-.pm-btn-primary {
-  background-color: var(--color-accent);
-  color: white;
-  border-color: var(--color-accent);
-}
-
-.pm-btn-primary:hover {
-  background-color: var(--color-accent-hover);
-}
-
-.pm-btn-secondary {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
   background-color: var(--color-bg-primary);
   color: var(--color-text-primary);
+  overflow: hidden;
 }
 
-.pm-btn-secondary:hover {
-  background-color: var(--color-bg-tertiary);
-  border-color: var(--color-border-hover);
+.pm-sidebar {
+  width: 280px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--color-border);
+  height: 100%;
 }
 
-.pm-content {
+.pm-main {
   flex: 1;
-  padding: 1rem;
-  overflow: auto;
-}
-
-.pm-filters {
   display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
 }
 
-.pm-search {
+.pm-toolbar {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-bg-secondary);
+}
+
+.search-box {
   position: relative;
   flex: 1;
-  min-width: 200px;
+  max-width: 400px;
 }
 
-.pm-search svg {
+.search-box svg {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -840,299 +618,100 @@ onMounted(() => {
   color: var(--color-text-tertiary);
 }
 
-.pm-search input {
+.search-box input {
   width: 100%;
-  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
+  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  background-color: var(--color-bg-secondary);
+  background-color: var(--color-bg-primary);
   color: var(--color-text-primary);
-  font-size: 0.875rem;
-  transition: all 0.2s ease;
 }
 
-.pm-search input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-light);
+.filter-group {
+  display: flex;
+  gap: 0.5rem;
 }
 
-.pm-type-filter, .pm-folder-filter {
-  padding: 0.5rem 0.75rem;
+.type-select {
+  padding: 0.5rem;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  background-color: var(--color-bg-secondary);
+  background-color: var(--color-bg-primary);
   color: var(--color-text-primary);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 120px;
 }
 
-.pm-type-filter:focus, .pm-folder-filter:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-light);
-}
-
-/* 文件夹统计卡片 */
-.pm-folder-stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
-  margin-bottom: 2rem;
-}
-
-.pm-stat-card {
+.action-group {
+  margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 1.5rem;
-  padding: 1.5rem 2rem;
-  background-color: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  transition: all 0.2s ease;
-}
-
-.pm-stat-card:hover {
-  border-color: var(--color-border-hover);
-  box-shadow: var(--shadow-sm);
-}
-
-.pm-stat-icon {
-  font-size: 2rem;
-  opacity: 0.8;
-}
-
-.pm-stat-info {
-  flex: 1;
-}
-
-.pm-stat-number {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-  line-height: 1;
-}
-
-.pm-stat-label {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  margin-top: 0.25rem;
-}
-
-.pm-preset-list, .pm-folder-list {
-  display: flex;
-  flex-direction: column;
   gap: 0.75rem;
-  min-height: 400px;
 }
 
-.pm-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 1rem;
-  text-align: center;
-  color: var(--color-text-tertiary);
-  flex: 1;
-  min-height: 300px;
-}
-
-.pm-empty-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.5;
-}
-
-.pm-empty-text {
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.pm-empty-text h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-}
-
-.pm-empty-text p {
-  margin: 0 0 0.25rem 0;
-  color: var(--color-text-tertiary);
-}
-
-.pm-empty-text p:last-child {
-  margin-bottom: 0;
-}
-
-.pm-preset-item, .pm-folder-item {
-  background-color: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  transition: all 0.2s ease;
-}
-
-.pm-preset-item:hover, .pm-folder-item:hover {
-  border-color: var(--color-border-hover);
-  box-shadow: var(--shadow-sm);
-}
-
-.pm-preset-header, .pm-folder-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 0.75rem;
-}
-
-.pm-preset-info, .pm-folder-info {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  flex: 1;
-  min-width: 0;
-}
-
-.pm-preset-type {
-  font-size: 1.25rem;
-  flex-shrink: 0;
-  margin-top: 0.125rem;
-}
-
-.pm-folder-icon {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  flex-shrink: 0;
-}
-
-.pm-preset-title, .pm-folder-details {
-  flex: 1;
-  min-width: 0;
-}
-
-.pm-preset-title h4, .pm-folder-details h4 {
-  margin: 0 0 0.25rem 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pm-preset-meta, .pm-folder-meta {
-  font-size: 0.75rem;
-  color: var(--color-text-tertiary);
-}
-
-.pm-preset-actions, .pm-folder-actions {
+.import-export {
   display: flex;
   gap: 0.25rem;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
+  border-left: 1px solid var(--color-border);
+  padding-left: 0.75rem;
 }
 
-.pm-preset-item:hover .pm-preset-actions,
-.pm-folder-item:hover .pm-folder-actions {
-  opacity: 1;
+.pm-content-area {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
 }
 
-.pm-action-btn {
+/* Buttons */
+.btn-primary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-accent);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-weight: 500;
+  transition: opacity 0.2s;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+.btn-secondary {
+  padding: 0.5rem 1rem;
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+}
+
+.btn-secondary:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.btn-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2rem;
   height: 2rem;
-  border: 1px solid var(--color-border);
-  background-color: var(--color-bg-primary);
-  color: var(--color-text-secondary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.pm-action-btn:hover {
-  background-color: var(--color-bg-tertiary);
-  color: var(--color-text-primary);
-}
-
-.pm-action-btn.pm-apply:hover {
-  background-color: var(--color-success);
-  color: white;
-  border-color: var(--color-success);
-}
-
-.pm-action-btn.pm-delete:hover {
-  background-color: var(--color-error);
-  color: white;
-  border-color: var(--color-error);
-}
-
-/* 文件夹树展开按钮 */
-.pm-expander {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: none;
   background: transparent;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  margin-right: 0.25rem;
-}
-
-.pm-expander:hover {
+  border: none;
   color: var(--color-text-secondary);
-}
-
-.pm-preset-description, .pm-folder-description {
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  line-height: 1.4;
-}
-
-.pm-preset-content {
-  background-color: var(--color-bg-tertiary);
-  padding: 0.75rem;
   border-radius: var(--radius-md);
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  font-size: 0.8125rem;
-  line-height: 1.4;
+  cursor: pointer;
+}
+
+.btn-icon:hover {
+  background-color: var(--color-bg-tertiary);
   color: var(--color-text-primary);
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin-bottom: 0.75rem;
-  max-height: 120px;
-  overflow-y: auto;
 }
 
-.pm-preset-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-}
-
-.pm-tag {
-  padding: 0.25rem 0.5rem;
-  background-color: var(--color-accent-light);
-  color: var(--color-accent);
-  border-radius: var(--radius-sm);
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-/* 模态框样式 */
-.pm-modal-overlay {
+/* Modal */
+.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -1142,74 +721,54 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
+  z-index: 100;
+  backdrop-filter: blur(2px);
 }
 
-.pm-modal {
+.modal-content {
   background-color: var(--color-bg-primary);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl);
-  width: 100%;
-  max-width: 600px;
+  width: 90%;
+  max-width: 500px;
   max-height: 90vh;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
-.pm-modal-header {
+.modal-header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1.5rem;
-  border-bottom: 1px solid var(--color-border);
 }
 
-.pm-modal-header h3 {
+.modal-header h3 {
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
-  color: var(--color-text-primary);
 }
 
-.pm-modal-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border: none;
+.close-btn {
   background: transparent;
-  color: var(--color-text-secondary);
+  border: none;
   font-size: 1.5rem;
+  color: var(--color-text-tertiary);
   cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: all 0.2s ease;
+  line-height: 1;
 }
 
-.pm-modal-close:hover {
-  background-color: var(--color-bg-secondary);
-  color: var(--color-text-primary);
-}
-
-.pm-modal-body {
-  flex: 1;
+.modal-body {
   padding: 1.5rem;
   overflow-y: auto;
 }
 
-.pm-form-group {
+.form-group {
   margin-bottom: 1rem;
 }
 
-.pm-form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.pm-form-group label {
+.form-group label {
   display: block;
   margin-bottom: 0.5rem;
   font-size: 0.875rem;
@@ -1217,130 +776,60 @@ onMounted(() => {
   color: var(--color-text-secondary);
 }
 
-.pm-form-group input,
-.pm-form-group select,
-.pm-form-group textarea {
+.form-group input,
+.form-group select,
+.form-group textarea {
   width: 100%;
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background-color: var(--color-bg-secondary);
   color: var(--color-text-primary);
-  font-size: 0.875rem;
-  transition: all 0.2s ease;
   font-family: inherit;
 }
 
-.pm-form-group input:focus,
-.pm-form-group select:focus,
-.pm-form-group textarea:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-light);
-}
-
-.pm-form-group textarea {
+.form-group textarea {
   resize: vertical;
-  min-height: 80px;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  line-height: 1.4;
 }
 
-.pm-form-group input[type="color"] {
-  width: 60px;
-  height: 40px;
-  padding: 0.25rem;
-  cursor: pointer;
+.form-row {
+  display: flex;
+  gap: 1rem;
 }
 
-.pm-modal-footer {
+.form-row .form-group {
+  flex: 1;
+}
+
+.modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border);
   display: flex;
   justify-content: flex-end;
   gap: 0.75rem;
-  padding: 1.5rem;
-  border-top: 1px solid var(--color-border);
 }
 
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .pm-header {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-  }
-  
-  .pm-actions {
-    justify-content: center;
-  }
-  
-  .pm-filters {
-    flex-direction: column;
-  }
-  
-  .pm-search {
-    min-width: auto;
-  }
-  
-  .pm-preset-header,
-  .pm-folder-header {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.75rem;
-  }
-  
-  .pm-preset-actions,
-  .pm-folder-actions {
-    align-self: flex-end;
-    opacity: 1;
-  }
-  
-  .pm-form-row {
-    grid-template-columns: 1fr;
-  }
-  
-  .pm-modal {
-    margin: 0;
-    border-radius: 0;
-    max-height: 100vh;
-  }
+.color-picker {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
-@media (max-width: 768px) {
-  .pm-folder-stats {
-    grid-template-columns: 1fr;
-  }
-  
-  .pm-stat-card {
-    padding: 0.75rem;
-  }
-  
-  .pm-stat-icon {
-    font-size: 1.5rem;
-  }
-  
-  .pm-stat-number {
-    font-size: 1.25rem;
-  }
+.color-option {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: all 0.2s;
 }
 
-@media (max-width: 640px) {
-  .pm-content {
-    padding: 0.75rem;
-  }
-  
-  .pm-preset-item,
-  .pm-folder-item {
-    padding: 0.75rem;
-  }
-  
-  .pm-folder-stats {
-    margin-bottom: 1rem;
-  }
-  
-  .pm-modal-header,
-  .pm-modal-body,
-  .pm-modal-footer {
-    padding: 1rem;
-  }
+.color-option:hover {
+  transform: scale(1.1);
+}
+
+.color-option.active {
+  border-color: var(--color-text-primary);
+  box-shadow: 0 0 0 2px var(--color-bg-primary);
 }
 </style>
diff --git a/src/components/PromptEditor.vue b/src/components/PromptEditor.vue
index 72d185d..a6d39e3 100644
--- a/src/components/PromptEditor.vue
+++ b/src/components/PromptEditor.vue
@@ -631,7 +631,8 @@ function isRemoveDisabled(token: string): boolean {
 <template>
   <div class="pe-root">
     <header class="pe-toolbar">
-      <div class="pe-left">
+      <div class="pe-toolbar-content">
+        <div class="pe-left">
         <label>语言</label>
         <select v-model="selectedLang">
           <option v-for="l in store.languages" :key="l" :value="l">{{ l }}</option>
@@ -686,6 +687,7 @@ function isRemoveDisabled(token: string): boolean {
           />
         </div>
       </div>
+      </div>
     </header>
 
     <main class="pe-main">
@@ -972,12 +974,18 @@ function isRemoveDisabled(token: string): boolean {
 }
 
 .pe-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   padding: 1rem 1.5rem;
   background-color: var(--color-bg-secondary);
   border-bottom: 1px solid var(--color-border);
+}
+
+.pe-toolbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
   gap: 1rem;
   flex-wrap: wrap;
 }
@@ -1229,6 +1237,9 @@ function isRemoveDisabled(token: string): boolean {
   height: calc(100vh - 8rem);
   gap: 1px;
   background-color: var(--color-border);
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
 .pe-left-pane, .pe-right-pane {
diff --git a/src/components/PromptManager.vue b/src/components/PromptManager.vue
index 824e5de..6433338 100644
--- a/src/components/PromptManager.vue
+++ b/src/components/PromptManager.vue
@@ -75,7 +75,7 @@ function exportAll() {
   const url = URL.createObjectURL(blob);
   const a = document.createElement('a');
   a.href = url;
-  a.download = `prompt_dataset_${new Date().toISOString().slice(0,19)}.json`;
+  a.download = `prompt_dataset_${new Date().toISOString().slice(0, 19)}.json`;
   document.body.appendChild(a);
   a.click();
   a.remove();
@@ -114,13 +114,8 @@ function resetDefault() {
         <select v-model="selectedLang" class="pm-select pm-lang">
           <option v-for="l in languages" :key="l" :value="l">{{ l }}</option>
         </select>
-        <input
-          class="pm-search"
-          type="search"
-          placeholder="搜索关键字/翻译"
-          :value="store.searchQuery"
-          @input="store.setSearch(($event.target as HTMLInputElement).value)"
-        />
+        <input class="pm-search" type="search" placeholder="搜索关键字/翻译" :value="store.searchQuery"
+          @input="store.setSearch(($event.target as HTMLInputElement).value)" />
       </div>
       <div class="pm-right">
         <button class="pm-btn" @click="exportAll">导出 JSON</button>
@@ -136,13 +131,15 @@ function resetDefault() {
       <aside class="pm-cats">
         <div class="pm-section-title">分类</div>
         <ul>
-          <li v-for="(c,ci) in categories" :key="c.id" :class="{ active: ci===store.selectedCategoryIndex }" @click="store.selectCategory(ci)">
+          <li v-for="(c, ci) in categories" :key="c.id" :class="{ active: ci === store.selectedCategoryIndex }"
+            @click="store.selectCategory(ci)">
             {{ c.name }}
           </li>
         </ul>
         <div class="pm-section-title">分组</div>
         <ul>
-          <li v-for="(g,gi) in currentCategory?.groups" :key="g.id" :class="{ active: gi===store.selectedGroupIndex }" @click="store.selectGroup(gi)">
+          <li v-for="(g, gi) in currentCategory?.groups" :key="g.id" :class="{ active: gi === store.selectedGroupIndex }"
+            @click="store.selectGroup(gi)">
             <span class="pm-color" :style="{ background: g.color || 'transparent' }"></span>
             {{ g.name }}
           </li>
@@ -155,18 +152,13 @@ function resetDefault() {
         </div>
         <div v-if="!currentGroup" class="pm-empty">请选择一个分组</div>
         <ul v-else class="pm-tags">
-          <li
-            v-for="(t,ti) in filteredTags"
-            :key="t.key + '_' + ti"
-            :draggable="true"
-            @dragstart="onDragStart(ti)"
-            @dragover="onDragOver(ti, $event)"
-            @drop="onDrop(ti)"
-            :class="{ hidden: t.hidden, 'pm-over': ti===overIndex }"
-          >
+          <li v-for="(t, ti) in filteredTags" :key="t.key + '_' + ti" :draggable="true" @dragstart="onDragStart(ti)"
+            @dragover="onDragOver(ti, $event)" @drop="onDrop(ti)"
+            :class="{ hidden: t.hidden, 'pm-over': ti === overIndex }">
             <span class="pm-handle">⋮⋮</span>
             <input class="pm-key" :value="t.key" @input="updateKey(t, ($event.target as HTMLInputElement).value)" />
-            <input class="pm-trans" :value="displayTranslation(t)" @input="updateTrans(t, ($event.target as HTMLInputElement).value)" />
+            <input class="pm-trans" :value="displayTranslation(t)"
+              @input="updateTrans(t, ($event.target as HTMLInputElement).value)" />
             <button class="pm-hide" @click="toggleHidden(t)">{{ t.hidden ? '显示' : '隐藏' }}</button>
             <button class="pm-del" @click="removeTag(t)">删除</button>
           </li>
@@ -174,63 +166,330 @@ function resetDefault() {
       </section>
     </main>
   </div>
-  
+
 </template>
 
 <style scoped>
-.pm-root { display: flex; flex-direction: column; height: 100vh; }
-.pm-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--color-border); gap: 12px; background-color: var(--color-bg-primary); }
-.pm-left { display: flex; align-items: center; gap: 8px; }
-.pm-right { display: flex; align-items: center; gap: 8px; }
-.pm-tip { font-size: 12px; color: var(--color-text-tertiary); }
+.pm-root {
+  display: flex;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.pm-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+  gap: 12px;
+  background-color: var(--color-bg-primary);
+}
+
+.pm-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pm-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pm-tip {
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
 
 /* 按钮与输入样式，与 PresetManager 保持一致 */
-.pm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-primary); cursor: pointer; line-height: 1; font-size: 14px; color: var(--color-text-primary); transition: all 0.2s ease; }
-.pm-btn:hover { background-color: var(--color-bg-tertiary); border-color: var(--color-border-hover); }
-.pm-btn-primary, .pm-btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; line-height: 1; }
-.pm-btn-primary { background-color: var(--color-accent); color: var(--color-text-primary); border-color: var(--color-accent); }
-.pm-btn-primary:hover { background-color: var(--color-accent-hover); }
-.pm-btn-secondary { background-color: var(--color-bg-primary); color: var(--color-text-primary); }
-.pm-btn-secondary:hover { background-color: var(--color-bg-tertiary); border-color: var(--color-border-hover); }
+.pm-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
+  cursor: pointer;
+  line-height: 1;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  transition: all 0.2s ease;
+}
 
-.pm-import { display: inline-flex; align-items: center; gap: 6px; }
-.pm-import input { display: none; }
-.pm-search { width: 240px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-secondary); color: var(--color-text-primary); }
-.pm-search:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
-.pm-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 10px; height: 32px; line-height: 20px; font-size: 14px; color: var(--color-text-primary); }
-.pm-select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
+.pm-btn:hover {
+  background-color: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
+}
 
-.pm-main { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 50px); }
-.pm-cats { border-right: 1px solid var(--color-border); overflow: auto; padding: 8px; background-color: var(--color-bg-primary); }
-.pm-section-title { font-size: 12px; color: var(--color-text-tertiary); margin: 8px 0; }
-.pm-cats ul { list-style: none; margin: 0; padding: 0; }
-.pm-cats li { padding: 6px 8px; border-radius: var(--radius-md); cursor: pointer; }
-.pm-cats li.active { background-color: var(--color-accent-light); }
-.pm-color { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
-.pm-list { padding: 8px; overflow: auto; }
-.pm-list-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 8px; }
-.pm-empty { color: var(--color-text-tertiary); padding: 20px; }
-.pm-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
-.pm-tags li { display: grid; grid-template-columns: 24px 1fr 1fr auto auto; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-primary); }
-.pm-tags li { will-change: transform; }
-.pm-tags li.hidden { opacity: 0.5; }
-.pm-tags li.pm-over { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
-.pm-handle { cursor: grab; user-select: none; color: var(--color-text-tertiary); text-align: center; }
-.pm-key, .pm-trans { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-secondary); color: var(--color-text-primary); }
-.pm-key:focus, .pm-trans:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
-.pm-hide, .pm-del, .pm-list-toolbar button, .pm-right button { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-primary); cursor: pointer; line-height: 1; }
-.pm-hide:hover, .pm-del:hover, .pm-list-toolbar button:hover, .pm-right button:hover, .pm-btn:hover { background: var(--color-bg-tertiary); border-color: var(--color-border-hover); }
+.pm-btn-primary,
+.pm-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  line-height: 1;
+}
+
+.pm-btn-primary {
+  background-color: var(--color-accent);
+  color: var(--color-text-primary);
+  border-color: var(--color-accent);
+}
+
+.pm-btn-primary:hover {
+  background-color: var(--color-accent-hover);
+}
+
+.pm-btn-secondary {
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+}
+
+.pm-btn-secondary:hover {
+  background-color: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
+}
+
+.pm-import {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.pm-import input {
+  display: none;
+}
+
+.pm-search {
+  width: 240px;
+  padding: 6px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+}
+
+.pm-search:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.pm-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 6px 10px;
+  height: 32px;
+  line-height: 20px;
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+
+.pm-select:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.pm-main {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  height: calc(100vh - 50px);
+}
+
+.pm-cats {
+  border-right: 1px solid var(--color-border);
+  overflow: auto;
+  padding: 8px;
+  background-color: var(--color-bg-primary);
+}
+
+.pm-section-title {
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+  margin: 8px 0;
+}
+
+.pm-cats ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pm-cats li {
+  padding: 6px 8px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+}
+
+.pm-cats li.active {
+  background-color: var(--color-accent-light);
+}
+
+.pm-color {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.pm-list {
+  padding: 8px;
+  overflow: auto;
+}
+
+.pm-list-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.pm-empty {
+  color: var(--color-text-tertiary);
+  padding: 20px;
+}
+
+.pm-tags {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.pm-tags li {
+  display: grid;
+  grid-template-columns: 24px 1fr 1fr auto auto;
+  align-items: center;
+  gap: 6px;
+  padding: 6px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-primary);
+}
+
+.pm-tags li {
+  will-change: transform;
+}
+
+.pm-tags li.hidden {
+  opacity: 0.5;
+}
+
+.pm-tags li.pm-over {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.pm-handle {
+  cursor: grab;
+  user-select: none;
+  color: var(--color-text-tertiary);
+  text-align: center;
+}
+
+.pm-key,
+.pm-trans {
+  padding: 6px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+}
+
+.pm-key:focus,
+.pm-trans:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.pm-hide,
+.pm-del,
+.pm-list-toolbar button,
+.pm-right button {
+  padding: 6px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
+  cursor: pointer;
+  line-height: 1;
+}
+
+.pm-hide:hover,
+.pm-del:hover,
+.pm-list-toolbar button:hover,
+.pm-right button:hover,
+.pm-btn:hover {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
+}
 
 /* 手机端适配 */
 @media (max-width: 768px) {
-  .pm-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
-  .pm-left, .pm-right { flex-wrap: wrap; width: 100%; }
-  .pm-search { width: 100%; }
-  .pm-tip { display: none; }
-  .pm-main { grid-template-columns: 1fr; height: auto; }
-  .pm-cats { border-right: 0; border-bottom: 1px solid var(--color-border); }
-  .pm-tags li { grid-template-columns: 1fr; gap: 8px; }
-  .pm-handle { text-align: left; }
-  .pm-key, .pm-trans { width: 100%; }
+  .pm-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .pm-left,
+  .pm-right {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .pm-search {
+    width: 100%;
+  }
+
+  .pm-tip {
+    display: none;
+  }
+
+  .pm-main {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .pm-cats {
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .pm-tags li {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .pm-handle {
+    text-align: left;
+  }
+
+  .pm-key,
+  .pm-trans {
+    width: 100%;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/preset/FolderTreeItem.vue b/src/components/preset/FolderTreeItem.vue
new file mode 100644
index 0000000..1a06136
--- /dev/null
+++ b/src/components/preset/FolderTreeItem.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { computed, ref, nextTick } from 'vue';
+import type { PresetFolder } from '../../types';
+
+// 定义树节点类型，包含 children
+interface FolderNode extends PresetFolder {
+  children: FolderNode[];
+  presetCount: number;
+}
+
+const props = defineProps<{
+  folder: FolderNode;
+  level: number;
+  selectedFolderId: string | null;
+  expandedIds: Set<string>;
+}>();
+
+const emit = defineEmits<{
+  (e: 'select', id: string): void;
+  (e: 'toggle', id: string): void;
+  (e: 'create-sub', parentId: string): void;
+  (e: 'edit', folder: PresetFolder): void;
+  (e: 'delete', folder: PresetFolder): void;
+}>();
+
+const isExpanded = computed(() => props.expandedIds.has(props.folder.id));
+const isSelected = computed(() => props.selectedFolderId === props.folder.id);
+
+function handleToggle(e: Event) {
+  e.stopPropagation();
+  emit('toggle', props.folder.id);
+}
+
+function handleSelect() {
+  emit('select', props.folder.id);
+}
+
+// 上下文菜单或操作按钮
+const showActions = ref(false);
+</script>
+
+<template>
+  <div class="folder-tree-item">
+    <div 
+      class="folder-row" 
+      :class="{ active: isSelected }"
+      :style="{ paddingLeft: `${level * 1.2 + 0.5}rem` }"
+      @click="handleSelect"
+      @mouseenter="showActions = true"
+      @mouseleave="showActions = false"
+    >
+      <!-- 展开/折叠箭头 -->
+      <button 
+        class="toggle-btn" 
+        :class="{ invisible: !folder.children.length }"
+        @click="handleToggle"
+      >
+        <svg 
+          width="12" 
+          height="12" 
+          viewBox="0 0 24 24" 
+          fill="none" 
+          :class="{ rotated: isExpanded }"
+          class="arrow-icon"
+        >
+          <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+
+      <!-- 文件夹图标 -->
+      <span class="folder-icon" :style="{ color: folder.color || '#6366f1' }">
+        <svg v-if="isExpanded" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" fill="currentColor" fill-opacity="0.2" stroke="currentColor" stroke-width="2"/>
+        </svg>
+        <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" fill="currentColor" fill-opacity="0.2" stroke="currentColor" stroke-width="2"/>
+        </svg>
+      </span>
+
+      <!-- 文件夹名称 -->
+      <span class="folder-name">{{ folder.name }}</span>
+      
+      <!-- 计数 -->
+      <span class="folder-count" v-if="folder.presetCount > 0">{{ folder.presetCount }}</span>
+
+      <!-- 操作按钮组 (悬停显示) -->
+      <div class="folder-actions" v-show="showActions || isSelected">
+        <button @click.stop="emit('create-sub', folder.id)" title="新建子文件夹">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 5v14M5 12h14"/>
+          </svg>
+        </button>
+        <button @click.stop="emit('edit', folder)" title="编辑文件夹">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+          </svg>
+        </button>
+        <button @click.stop="emit('delete', folder)" class="delete-btn" title="删除文件夹">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- 递归渲染子节点 -->
+    <div v-if="isExpanded && folder.children.length" class="folder-children">
+      <FolderTreeItem
+        v-for="child in folder.children"
+        :key="child.id"
+        :folder="child"
+        :level="level + 1"
+        :selected-folder-id="selectedFolderId"
+        :expanded-ids="expandedIds"
+        @select="emit('select', $event)"
+        @toggle="emit('toggle', $event)"
+        @create-sub="emit('create-sub', $event)"
+        @edit="emit('edit', $event)"
+        @delete="emit('delete', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.folder-row {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  transition: all 0.1s ease;
+  position: relative;
+  user-select: none;
+  height: 2rem;
+}
+
+.folder-row:hover {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+}
+
+.folder-row.active {
+  background-color: var(--color-accent-light);
+  color: var(--color-accent);
+}
+
+/* 适配暗色模式下的选中状态 */
+:global(.dark) .folder-row.active {
+  background-color: rgba(59, 130, 246, 0.2);
+  color: var(--color-accent);
+}
+
+.toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  margin-right: 0.25rem;
+}
+
+.toggle-btn.invisible {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.arrow-icon {
+  transition: transform 0.2s ease;
+}
+
+.arrow-icon.rotated {
+  transform: rotate(90deg);
+}
+
+.folder-icon {
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.folder-name {
+  flex: 1;
+  font-size: 0.875rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.folder-count {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin-left: 0.5rem;
+  background-color: var(--color-bg-tertiary);
+  padding: 0 0.375rem;
+  border-radius: 99px;
+  min-width: 1.25rem;
+  text-align: center;
+}
+
+.folder-actions {
+  display: flex;
+  gap: 0.25rem;
+  margin-left: 0.5rem;
+}
+
+.folder-actions button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.folder-actions button:hover {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+.folder-actions button.delete-btn:hover {
+  color: var(--color-error);
+  background-color: rgba(239, 68, 68, 0.1);
+}
+</style>
diff --git a/src/components/preset/PresetList.vue b/src/components/preset/PresetList.vue
new file mode 100644
index 0000000..0374667
--- /dev/null
+++ b/src/components/preset/PresetList.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ExtendedPreset, PresetType } from '../../types';
+
+const props = defineProps<{
+  presets: ExtendedPreset[];
+  searchQuery: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'apply', preset: ExtendedPreset): void;
+  (e: 'edit', preset: ExtendedPreset): void;
+  (e: 'delete', preset: ExtendedPreset): void;
+  (e: 'copy', preset: ExtendedPreset): void;
+}>();
+
+function getTypeIcon(type: PresetType) {
+  const icons: Record<string, string> = {
+    positive: '👍',
+    negative: '👎',
+    setting: '⚙️',
+    style: '🎨',
+    character: '👤',
+    scene: '🌍',
+    custom: '📝'
+  };
+  return icons[type] || '📝';
+}
+
+function getTypeLabel(type: PresetType) {
+  const labels: Record<string, string> = {
+    positive: '正面',
+    negative: '负面',
+    setting: '设定',
+    style: '风格',
+    character: '角色',
+    scene: '场景',
+    custom: '自定义'
+  };
+  return labels[type] || type;
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString('zh-CN');
+}
+</script>
+
+<template>
+  <div class="preset-list-container">
+    <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>
+          <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="应用预设">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="20,6 9,17 4,12"/>
+              </svg>
+            </button>
+            <button @click="emit('copy', preset)" class="action-btn" title="复制内容">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                <path d="m5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+              </svg>
+            </button>
+            <div class="dropdown-menu">
+              <button class="action-btn more-btn">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="12" cy="12" r="1"/>
+                  <circle cx="19" cy="12" r="1"/>
+                  <circle cx="5" cy="12" r="1"/>
+                </svg>
+              </button>
+              <div class="dropdown-content">
+                <button @click="emit('edit', preset)">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+                    <path d="m18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                  </svg>
+                  编辑
+                </button>
+                <button @click="emit('delete', preset)" class="delete-item">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="3,6 5,6 21,6"/>
+                    <path d="m19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                  </svg>
+                  删除
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card-body">
+          <div class="preset-preview">{{ preset.content }}</div>
+          <div v-if="preset.description" class="preset-desc">{{ preset.description }}</div>
+        </div>
+
+        <div class="card-footer">
+          <div class="tags-list" v-if="preset.tags && preset.tags.length">
+            <span v-for="tag in preset.tags.slice(0, 3)" :key="tag" class="tag">{{ tag }}</span>
+            <span v-if="preset.tags.length > 3" class="tag-more">+{{ preset.tags.length - 3 }}</span>
+          </div>
+          <div class="date-info" v-else>
+            {{ formatDate(preset.updatedAt) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.preset-list-container {
+  padding: 1rem;
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-text-tertiary);
+  opacity: 0.6;
+}
+
+.empty-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.preset-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.preset-card {
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.preset-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border-hover);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.preset-type {
+  font-size: 1.25rem;
+  margin-right: 0.75rem;
+  flex-shrink: 0;
+}
+
+.preset-name {
+  flex: 1;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.preset-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.preset-card:hover .preset-actions {
+  opacity: 1;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 1px solid var(--color-border);
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+.apply-btn:hover {
+  background-color: var(--color-accent);
+  color: white;
+  border-color: var(--color-accent);
+}
+
+/* Dropdown menu implementation */
+.dropdown-menu {
+  position: relative;
+  height: 1.75rem; /* Match button height to ensure alignment */
+}
+
+.dropdown-menu::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 0.5rem; /* Bridge the gap */
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.25rem);
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  min-width: 120px;
+  z-index: 10;
+  padding: 0.25rem;
+}
+
+.dropdown-menu:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown-content button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+
+.dropdown-content button:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.dropdown-content button.delete-item:hover {
+  color: var(--color-error);
+  background-color: rgba(239, 68, 68, 0.1);
+}
+
+.card-body {
+  flex: 1;
+  margin-bottom: 0.75rem;
+  min-height: 4rem;
+}
+
+.preset-preview {
+  font-family: monospace;
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-tertiary);
+  padding: 0.5rem;
+  border-radius: var(--radius-md);
+  height: 3.5rem;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3; 
+  -webkit-box-orient: vertical;
+  margin-bottom: 0.5rem;
+  word-break: break-all;
+}
+
+.preset-desc {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2; 
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+}
+
+.tags-list {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.tag {
+  background-color: var(--color-bg-secondary);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+}
+
+.tag-more {
+  background-color: var(--color-bg-tertiary);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+}
+</style>
diff --git a/src/components/preset/PresetSidebar.vue b/src/components/preset/PresetSidebar.vue
new file mode 100644
index 0000000..6bbd84c
--- /dev/null
+++ b/src/components/preset/PresetSidebar.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import FolderTreeItem from './FolderTreeItem.vue';
+import type { PresetFolder } from '../../types';
+
+interface FolderNode extends PresetFolder {
+  children: FolderNode[];
+  presetCount: number;
+}
+
+const props = defineProps<{
+  folderTree: FolderNode[];
+  selectedFolderId: string | null;
+  expandedIds: Set<string>;
+  allCount: number;
+  uncategorizedCount: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:selectedFolderId', id: string | null): void;
+  (e: 'toggle-expand', id: string): void;
+  (e: 'create-folder'): void;
+  (e: 'create-sub-folder', parentId: string): void;
+  (e: 'edit-folder', folder: PresetFolder): void;
+  (e: 'delete-folder', folder: PresetFolder): void;
+}>();
+
+function selectFolder(id: string | null) {
+  emit('update:selectedFolderId', id);
+}
+</script>
+
+<template>
+  <div class="preset-sidebar">
+    <div class="sidebar-header">
+      <h3 class="sidebar-title">预设文件夹</h3>
+      <button @click="emit('create-folder')" class="add-folder-btn" title="新建根文件夹">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="2"/>
+          <line x1="12" y1="11" x2="12" y2="17" stroke="currentColor" stroke-width="2"/>
+          <line x1="9" y1="14" x2="15" y2="14" stroke="currentColor" stroke-width="2"/>
+        </svg>
+      </button>
+    </div>
+
+    <div class="sidebar-content">
+      <!-- 固定选项 -->
+      <div class="system-folders">
+        <div 
+          class="sidebar-item" 
+          :class="{ active: selectedFolderId === null }"
+          @click="selectFolder(null)"
+        >
+          <span class="item-icon">📋</span>
+          <span class="item-name">所有预设</span>
+          <span class="item-count">{{ allCount }}</span>
+        </div>
+        
+        <div 
+          class="sidebar-item" 
+          :class="{ active: selectedFolderId === '' }"
+          @click="selectFolder('')"
+        >
+          <span class="item-icon">📂</span>
+          <span class="item-name">未分类</span>
+          <span class="item-count">{{ uncategorizedCount }}</span>
+        </div>
+      </div>
+
+      <div class="folder-tree-container">
+        <div v-if="folderTree.length === 0" class="empty-tree">
+          暂无文件夹
+        </div>
+        <FolderTreeItem
+          v-for="folder in folderTree"
+          :key="folder.id"
+          :folder="folder"
+          :level="0"
+          :selected-folder-id="selectedFolderId"
+          :expanded-ids="expandedIds"
+          @select="selectFolder"
+          @toggle="emit('toggle-expand', $event)"
+          @create-sub="emit('create-sub-folder', $event)"
+          @edit="emit('edit-folder', $event)"
+          @delete="emit('delete-folder', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.preset-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--color-bg-secondary);
+  border-right: 1px solid var(--color-border);
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sidebar-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.add-folder-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.add-folder-btn:hover {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-accent);
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.system-folders {
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  transition: all 0.1s ease;
+  margin-bottom: 0.25rem;
+}
+
+.sidebar-item:hover {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+.sidebar-item.active {
+  background-color: var(--color-accent);
+  color: white;
+}
+
+.sidebar-item.active .item-count {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+.item-icon {
+  margin-right: 0.75rem;
+  font-size: 1rem;
+}
+
+.item-name {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.item-count {
+  font-size: 0.75rem;
+  background-color: var(--color-bg-tertiary);
+  padding: 0.125rem 0.375rem;
+  border-radius: 99px;
+  min-width: 1.25rem;
+  text-align: center;
+}
+
+.empty-tree {
+  padding: 1rem;
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: 0.875rem;
+  font-style: italic;
+}
+
+/* 滚动条样式优化 */
+.sidebar-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb {
+  background-color: var(--color-border);
+  border-radius: 3px;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-text-tertiary);
+}
+</style>
diff --git a/src/style.css b/src/style.css
index 1a66ec4..2875238 100644
--- a/src/style.css
+++ b/src/style.css
@@ -24,26 +24,13 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.card {
-  padding: 2em;
-}
-
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
+  height: 100%;
 }
 
 @media (prefers-color-scheme: light) {