feat: hierarchical prompt structure with drag-drop and keyboard indentation

apps/desktop/src/main/ipc/prompt.ipc.ts

@@ -249,4 +249,10 @@ export function registerPromptIPC(db: PromptDB, folderDb: FolderDB, rawDb: Datab
     db.insertVersionDirect(version);
     return true;
   });
+
+  ipcMain.handle(IPC_CHANNELS.PROMPT_MOVE, async (_, promptId: string, newParentId: string | null, newOrder: number) => {
+    db.movePrompt(promptId, newParentId, newOrder);
+    syncWorkspace();
+    return true;
+  });
 }

apps/desktop/src/preload/api/prompt.ts

@@ -40,4 +40,6 @@ export const promptApi = {
     prompts: Prompt[];
     versions: PromptVersion[];
   }) => ipcRenderer.invoke(IPC_CHANNELS.PROMPT_MIGRATE_IDB_BATCH, payload),
+  move: (promptId: string, newParentId: string | null, newOrder: number) =>
+    ipcRenderer.invoke(IPC_CHANNELS.PROMPT_MOVE, promptId, newParentId, newOrder),
 };

apps/desktop/src/renderer/components/layout/MainContent.tsx

@@ -24,6 +24,7 @@ const PromptQuickRewriteDialog = lazy(() => import('../prompt/PromptQuickRewrite
 const PromptTableView = lazy(() => import('../prompt/PromptTableView').then(m => ({ default: m.PromptTableView })));
 const PromptGalleryView = lazy(() => import('../prompt/PromptGalleryView').then(m => ({ default: m.PromptGalleryView })));
 const PromptKanbanView = lazy(() => import('../prompt/PromptKanbanView').then(m => ({ default: m.PromptKanbanView })));
+const PromptListView = lazy(() => import('../prompt/PromptListView').then(m => ({ default: m.PromptListView })));
 const AiTestModal = lazy(() => import('../prompt/AiTestModal').then(m => ({ default: m.AiTestModal })));
 const PromptDetailModal = lazy(() => import('../prompt/PromptDetailModal').then(m => ({ default: m.PromptDetailModal })));
 const VariableInputModal = lazy(() => import('../prompt/VariableInputModal').then(m => ({ default: m.VariableInputModal })));
@@ -367,6 +368,7 @@ function PromptSkillMainContent() {
   const sortOrder = usePromptStore((state) => state.sortOrder);
   const viewMode = usePromptStore((state) => state.viewMode);
   const incrementUsageCount = usePromptStore((state) => state.incrementUsageCount);
+  const movePrompt = usePromptStore((state) => state.movePrompt);
   // Resizable prompt-list pane width (#119)
   const promptListPaneWidth = useUIStore((state) => state.promptListPaneWidth);
   const setPromptListPaneWidth = useUIStore(
@@ -2014,6 +2016,28 @@ function PromptSkillMainContent() {
         )}
       </div>
 
+      {/* List view mode: hierarchical list with drag-and-drop */}
+      {/* 列表视图模式：分层列表支持拖拽 */}
+      <div
+        className={getViewClass('list')}
+      >
+        <PromptListHeader count={sortedPrompts.length} />
+        {viewMode === 'list' && (
+          <Suspense fallback={loadingFallback}>
+            <PromptListView
+              prompts={visiblePrompts}
+              selectedId={selectedId}
+              selectedIds={selectedIds}
+              onSelect={(id) => selectPrompt(id)}
+              onToggleFavorite={toggleFavorite}
+              onCopy={handleCopyPrompt}
+              onContextMenu={handleContextMenu}
+              onMovePrompt={movePrompt}
+            />
+          </Suspense>
+        )}
+      </div>
+
       {/* Card view mode: two-column layout */}
       {/* 卡片视图模式：左右分栏 */}
       <div

apps/desktop/src/renderer/components/prompt/PromptListView.tsx

@@ -1,28 +1,73 @@
+import { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { StarIcon, CopyIcon, ImageIcon } from 'lucide-react';
+import { StarIcon, CopyIcon, ImageIcon, ChevronRight, ChevronDown, GripVertical } from 'lucide-react';
 import type { Prompt } from '@prompthub/shared/types';
 
 interface PromptListViewProps {
   prompts: Prompt[];
   selectedId: string | null;
+  selectedIds: string[];
   onSelect: (id: string) => void;
   onToggleFavorite: (id: string) => void;
   onCopy: (prompt: Prompt) => void;
   onContextMenu: (e: React.MouseEvent, prompt: Prompt) => void;
+  onMovePrompt: (promptId: string, newParentId: string | null, newOrder: number) => void;
+  sortBy?: string;
+  sortOrder?: 'asc' | 'desc';
 }
 
 export function PromptListView({
   prompts,
   selectedId,
+  selectedIds,
   onSelect,
   onToggleFavorite,
   onCopy,
   onContextMenu,
+  onMovePrompt,
 }: PromptListViewProps) {
   const { t } = useTranslation();
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [dropTargetId, setDropTargetId] = useState<string | null>(null);
+  const [dropPosition, setDropPosition] = useState<'before' | 'after' | 'inside' | null>(null);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!selectedId || draggingId) return;
+
+      const selectedPrompt = prompts.find(p => p.id === selectedId);
+      if (!selectedPrompt) return;
+
+      if (e.key === 'Tab' && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+
+        if (e.shiftKey) {
+          // Shift+Tab: outdent (move to parent level)
+          if (selectedPrompt.parentId) {
+            const siblings = prompts.filter(p => p.parentId === selectedPrompt.parentId);
+            const parentPrompt = prompts.find(p => p.id === selectedPrompt.parentId);
+            const newOrder = parentPrompt ? prompts.filter(p => p.parentId === parentPrompt?.parentId).length : prompts.filter(p => p.parentId === null).length;
+            onMovePrompt(selectedId, parentPrompt?.parentId || null, newOrder);
+          }
+        } else {
+          // Tab: indent (move to previous sibling's child)
+          const siblings = prompts.filter(p => p.parentId === selectedPrompt.parentId).sort((a, b) => (a.order || 0) - (b.order || 0));
+          const currentIndex = siblings.findIndex(s => s.id === selectedId);
+
+          if (currentIndex > 0) {
+            const prevSibling = siblings[currentIndex - 1];
+            const childCount = prompts.filter(p => p.parentId === prevSibling.id).length;
+            onMovePrompt(selectedId, prevSibling.id, childCount);
+          }
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedId, prompts, onMovePrompt, draggingId]);
 
-  // Format date
-  // 格式化日期
   const formatDate = (dateStr: string) => {
     const date = new Date(dateStr);
     const now = new Date();
@@ -40,29 +85,169 @@ export function PromptListView({
     }
   };
 
-  return (
-    <div className="flex flex-col">
-      {prompts.map((prompt) => (
+  const toggleExpand = useCallback((promptId: string) => {
+    setExpandedIds(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(promptId)) {
+        newSet.delete(promptId);
+      } else {
+        newSet.add(promptId);
+      }
+      return newSet;
+    });
+  }, []);
+
+  const hasChildren = useCallback((promptId: string) => {
+    return prompts.some(p => p.parentId === promptId);
+  }, [prompts]);
+
+  const getChildren = useCallback((parentId: string | null) => {
+    return prompts
+      .filter(p => p.parentId === parentId)
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+  }, [prompts]);
+
+  const handleDragStart = useCallback((e: React.DragEvent, promptId: string) => {
+    setDraggingId(promptId);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', promptId);
+  }, []);
+
+  const handleDragEnd = useCallback(() => {
+    setDraggingId(null);
+    setDropTargetId(null);
+    setDropPosition(null);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const handleDragEnter = useCallback((e: React.DragEvent, promptId: string) => {
+    e.preventDefault();
+    if (draggingId !== promptId) {
+      setDropTargetId(promptId);
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const y = e.clientY - rect.top;
+      const height = rect.height;
+
+      if (y < height / 3) {
+        setDropPosition('before');
+      } else if (y > height * 2 / 3) {
+        setDropPosition('after');
+      } else {
+        setDropPosition('inside');
+      }
+    }
+  }, [draggingId]);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDropTargetId(null);
+    setDropPosition(null);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent, targetPromptId: string) => {
+    e.preventDefault();
+    if (draggingId && draggingId !== targetPromptId) {
+      const targetPrompt = prompts.find(p => p.id === targetPromptId);
+      const draggingPrompt = prompts.find(p => p.id === draggingId);
+
+      if (targetPrompt && draggingPrompt) {
+        if (dropPosition === 'inside') {
+          const childCount = prompts.filter(p => p.parentId === targetPromptId).length;
+          onMovePrompt(draggingId, targetPromptId, childCount);
+        } else {
+          const newParentId = targetPrompt.parentId;
+          let targetOrder = targetPrompt.order || 0;
+
+          if (dropPosition === 'after') {
+            targetOrder += 1;
+          }
+
+          if (draggingPrompt.parentId === newParentId && draggingPrompt.order && draggingPrompt.order < targetOrder) {
+            targetOrder -= 1;
+          }
+
+          onMovePrompt(draggingId, newParentId, targetOrder);
+        }
+      }
+    }
+    setDraggingId(null);
+    setDropTargetId(null);
+    setDropPosition(null);
+  }, [draggingId, dropPosition, prompts, onMovePrompt]);
+
+  const isSelected = useCallback((promptId: string) => {
+    return selectedId === promptId || selectedIds.includes(promptId);
+  }, [selectedId, selectedIds]);
+
+  const isDragging = useCallback((promptId: string) => {
+    return draggingId === promptId;
+  }, [draggingId]);
+
+  const isDropTarget = useCallback((promptId: string) => {
+    return dropTargetId === promptId;
+  }, [dropTargetId]);
+
+  const renderTreeNode = useCallback((prompt: Prompt, depth: number) => {
+    const hasKids = hasChildren(prompt.id);
+    const isExpanded = expandedIds.has(prompt.id);
+
+    return (
+      <div key={prompt.id}>
         <div
-          key={prompt.id}
+          draggable
+          onDragStart={(e) => handleDragStart(e, prompt.id)}
+          onDragEnd={handleDragEnd}
+          onDragOver={handleDragOver}
+          onDragEnter={(e) => handleDragEnter(e, prompt.id)}
+          onDragLeave={handleDragLeave}
+          onDrop={(e) => handleDrop(e, prompt.id)}
           onClick={() => onSelect(prompt.id)}
           onContextMenu={(e) => onContextMenu(e, prompt)}
           className={`
             flex items-center gap-3 px-3 py-2.5 border-b border-border/50 cursor-pointer
-            transition-colors duration-quick
-            ${selectedId === prompt.id
+            transition-colors duration-quick relative
+            ${isSelected(prompt.id)
               ? 'bg-primary/10 border-l-2 border-l-primary'
-              : 'hover:bg-accent/50'
+              : isDropTarget(prompt.id) && dropPosition === 'inside'
+                ? 'bg-primary/20 border-l-2 border-l-primary'
+                : 'hover:bg-accent/50'
             }
+            ${isDragging(prompt.id) ? 'opacity-50' : ''}
+            ${isDropTarget(prompt.id) && dropPosition === 'inside' ? 'ring-2 ring-primary/50 ring-inset' : ''}
+            ${isDropTarget(prompt.id) && dropPosition === 'before' ? 'border-t-2 border-t-primary' : ''}
+            ${isDropTarget(prompt.id) && dropPosition === 'after' ? 'border-b-2 border-b-primary' : ''}
           `}
+          style={{ paddingLeft: `${depth * 16 + 12}px` }}
         >
-          {/* Title and description */}
-          {/* 标题和描述 */}
+          <div className="flex items-center gap-1">
+            {hasKids && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleExpand(prompt.id);
+                }}
+                className="p-0.5 rounded hover:bg-accent transition-colors"
+              >
+                {isExpanded ? (
+                  <ChevronDown className="w-4 h-4 text-muted-foreground" />
+                ) : (
+                  <ChevronRight className="w-4 h-4 text-muted-foreground" />
+                )}
+              </button>
+            )}
+            {!hasKids && <span className="w-5" />}
+            <GripVertical className="w-4 h-4 text-muted-foreground cursor-grab opacity-0 hover:opacity-100 transition-opacity" />
+          </div>
+
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
               <h3
                 className={`font-medium text-sm leading-snug break-words line-clamp-2 ${
-                  selectedId === prompt.id ? 'text-primary' : 'text-foreground'
+                  isSelected(prompt.id) ? 'text-primary' : 'text-foreground'
                 }`}
                 title={prompt.title}
               >
@@ -85,24 +270,18 @@ export function PromptListView({
             )}
           </div>
 
-          {/* Usage count */}
-          {/* 使用次数 */}
           <div className="flex-shrink-0 w-12 text-center">
             <span className="text-xs text-muted-foreground">
               {prompt.usageCount || 0}
             </span>
           </div>
 
-          {/* Update time */}
-          {/* 更新时间 */}
           <div className="flex-shrink-0 w-16 text-right">
             <span className="text-xs text-muted-foreground">
               {formatDate(prompt.updatedAt)}
             </span>
           </div>
 
-          {/* Action buttons */}
-          {/* 操作按钮 */}
           <div className="flex items-center gap-1 flex-shrink-0">
             <button
               onClick={(e) => {
@@ -129,7 +308,21 @@ export function PromptListView({
             </button>
           </div>
         </div>
-      ))}
+
+        {hasKids && isExpanded && (
+          <div>
+            {getChildren(prompt.id).map((child) => renderTreeNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  }, [hasChildren, expandedIds, toggleExpand, getChildren, isSelected, isDragging, isDropTarget, dropPosition, onSelect, onContextMenu, handleDragStart, handleDragEnd, handleDragOver, handleDragEnter, handleDragLeave, handleDrop, onCopy, onToggleFavorite, t]);
+
+  const rootNodes = getChildren(null);
+
+  return (
+    <div className="flex flex-col">
+      {rootNodes.map((node) => renderTreeNode(node, 0))}
     </div>
   );
-}
+}