feat(header): 优化 Feature/Project 拖拽排序与归档交互

- FeatureTabGroup 支持拖拽重排序，drag handle 仅在 project logo 上
- FeatureTab 支持在 group 内拖拽重排序，drag handle 仅在 feature 名称上
- 使用 closestCenter 碰撞检测，提升拖拽交互体验
- 移除 Status 子菜单（状态由程序自动管理）
- Archive 改为子菜单：Completed/Cancelled/On Hold
- 移除未使用的 StatusIcon 组件和相关导入

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: MarkShawn2020

src/components/GlobalHeader/FeatureTab.tsx

@@ -5,8 +5,6 @@ import { CSS } from "@dnd-kit/utilities";
 import {
   Cross2Icon,
   CheckCircledIcon,
-  UpdateIcon,
-  ExclamationTriangleIcon,
   TimerIcon,
   DrawingPinFilledIcon,
   Pencil1Icon,
@@ -25,27 +23,15 @@ import {
 } from "@/components/ui/context-menu";
 import { workspaceDataAtom } from "@/store";
 import { invoke } from "@tauri-apps/api/core";
-import type { Feature, FeatureStatus, WorkspaceData } from "@/views/Workspace/types";
+import type { Feature, WorkspaceData } from "@/views/Workspace/types";
 
 interface FeatureTabProps {
   feature: Feature;
   projectId: string;
   isActive: boolean;
   onSelect: () => void;
   isDragging?: boolean;
-}
-
-function StatusIcon({ status }: { status: FeatureStatus }) {
-  switch (status) {
-    case "pending":
-      return <TimerIcon className="w-3 h-3 text-muted-foreground" />;
-    case "running":
-      return <UpdateIcon className="w-3 h-3 text-blue-500" />;
-    case "completed":
-      return <CheckCircledIcon className="w-3 h-3 text-green-500" />;
-    case "needs-review":
-      return <ExclamationTriangleIcon className="w-3 h-3 text-amber-500" />;
-  }
+  dragHandleProps?: ReturnType<typeof useSortable>["listeners"];
 }
 
 export function FeatureTab({
@@ -54,6 +40,7 @@ export function FeatureTab({
   isActive,
   onSelect,
   isDragging,
+  dragHandleProps,
 }: FeatureTabProps) {
   const [workspace, setWorkspace] = useAtom(workspaceDataAtom);
   const [isRenaming, setIsRenaming] = useState(false);
@@ -100,7 +87,7 @@ export function FeatureTab({
     setIsRenaming(false);
   };
 
-  const handleArchive = async () => {
+  const handleArchive = async (note?: string) => {
     if (!workspace) return;
 
     const newProjects = workspace.projects.map((p) => {
@@ -109,7 +96,7 @@ export function FeatureTab({
       return {
         ...p,
         features: p.features.map((f) =>
-          f.id === feature.id ? { ...f, archived: true } : f
+          f.id === feature.id ? { ...f, archived: true, archived_note: note } : f
         ),
         active_feature_id:
           p.active_feature_id === feature.id
@@ -158,23 +145,6 @@ export function FeatureTab({
     await saveWorkspace({ ...workspace, projects: newProjects });
   };
 
-  const handleStatusChange = async (status: FeatureStatus) => {
-    if (!workspace) return;
-
-    const newProjects = workspace.projects.map((p) =>
-      p.id === projectId
-        ? {
-            ...p,
-            features: p.features.map((f) =>
-              f.id === feature.id ? { ...f, status } : f
-            ),
-          }
-        : p
-    );
-
-    await saveWorkspace({ ...workspace, projects: newProjects });
-  };
-
   const handleDoubleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     setRenameValue(feature.name);
@@ -209,10 +179,6 @@ export function FeatureTab({
           {feature.pinned && (
             <DrawingPinFilledIcon className="w-2.5 h-2.5 text-primary/70 flex-shrink-0" />
           )}
-          <span className="flex-shrink-0"><StatusIcon status={feature.status} /></span>
-          {feature.seq > 0 && (
-            <span className="text-[10px] text-muted-foreground/60 flex-shrink-0">#{feature.seq}</span>
-          )}
           {isRenaming ? (
             <input
               ref={inputRef}
@@ -226,7 +192,11 @@ export function FeatureTab({
               className="w-16 text-xs bg-card border border-border rounded px-1 outline-none focus:border-primary flex-shrink-0"
             />
           ) : (
-            <span className="text-xs truncate min-w-0" title={feature.name}>
+            <span
+              className="text-xs truncate min-w-0 cursor-grab active:cursor-grabbing"
+              title={feature.name}
+              {...dragHandleProps}
+            >
               {feature.name}
             </span>
           )}
@@ -259,51 +229,36 @@ export function FeatureTab({
           <DrawingPinFilledIcon className="w-3.5 h-3.5" />
           {feature.pinned ? "Unpin" : "Pin"}
         </ContextMenuItem>
+        <ContextMenuSeparator />
         <ContextMenuSub>
           <ContextMenuSubTrigger className="gap-2">
-            <StatusIcon status={feature.status} />
-            Status
+            <ArchiveIcon className="w-3.5 h-3.5" />
+            Archive
           </ContextMenuSubTrigger>
           <ContextMenuSubContent className="min-w-[120px]">
             <ContextMenuItem
-              onClick={() => handleStatusChange("pending")}
-              disabled={feature.status === "pending"}
+              onClick={() => handleArchive("completed")}
               className="gap-2 cursor-pointer"
             >
-              <TimerIcon className="w-3.5 h-3.5 text-muted-foreground" />
-              Pending
-            </ContextMenuItem>
-            <ContextMenuItem
-              onClick={() => handleStatusChange("running")}
-              disabled={feature.status === "running"}
-              className="gap-2 cursor-pointer"
-            >
-              <UpdateIcon className="w-3.5 h-3.5 text-blue-500" />
-              Running
+              <CheckCircledIcon className="w-3.5 h-3.5 text-green-500" />
+              Completed
             </ContextMenuItem>
             <ContextMenuItem
-              onClick={() => handleStatusChange("completed")}
-              disabled={feature.status === "completed"}
+              onClick={() => handleArchive("cancelled")}
               className="gap-2 cursor-pointer"
             >
-              <CheckCircledIcon className="w-3.5 h-3.5 text-green-500" />
-              Completed
+              <Cross2Icon className="w-3.5 h-3.5 text-muted-foreground" />
+              Cancelled
             </ContextMenuItem>
             <ContextMenuItem
-              onClick={() => handleStatusChange("needs-review")}
-              disabled={feature.status === "needs-review"}
+              onClick={() => handleArchive("on-hold")}
               className="gap-2 cursor-pointer"
             >
-              <ExclamationTriangleIcon className="w-3.5 h-3.5 text-amber-500" />
-              Needs Review
+              <TimerIcon className="w-3.5 h-3.5 text-amber-500" />
+              On Hold
             </ContextMenuItem>
           </ContextMenuSubContent>
         </ContextMenuSub>
-        <ContextMenuSeparator />
-        <ContextMenuItem onClick={handleArchive} className="gap-2 cursor-pointer">
-          <ArchiveIcon className="w-3.5 h-3.5" />
-          Archive
-        </ContextMenuItem>
         <ContextMenuItem
           onClick={handleDelete}
           className="gap-2 cursor-pointer text-destructive focus:text-destructive"
@@ -317,7 +272,7 @@ export function FeatureTab({
 }
 
 // Sortable wrapper for drag-and-drop
-export function SortableFeatureTab(props: Omit<FeatureTabProps, "isDragging">) {
+export function SortableFeatureTab(props: Omit<FeatureTabProps, "isDragging" | "dragHandleProps">) {
   const {
     attributes,
     listeners,
@@ -333,8 +288,8 @@ export function SortableFeatureTab(props: Omit<FeatureTabProps, "isDragging">) {
   };
 
   return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners} className="flex-shrink-0">
-      <FeatureTab {...props} isDragging={isDragging} />
+    <div ref={setNodeRef} style={style} {...attributes} className="flex-shrink-0">
+      <FeatureTab {...props} isDragging={isDragging} dragHandleProps={listeners} />
     </div>
   );
 }

src/components/GlobalHeader/FeatureTabGroup.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react";
 import { useAtom } from "jotai";
 import { PlusIcon, ArchiveIcon, DashboardIcon } from "@radix-ui/react-icons";
-import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
+import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { workspaceDataAtom, collapsedProjectGroupsAtom, viewAtom } from "@/store";
 import { invoke } from "@tauri-apps/api/core";
 import {
@@ -24,13 +25,17 @@ interface FeatureTabGroupProps {
   features: Feature[];
   isActiveProject: boolean;
   isCollapsed: boolean;
+  isDragging?: boolean;
+  dragHandleProps?: ReturnType<typeof useSortable>["listeners"];
 }
 
 export function FeatureTabGroup({
   project,
   features,
   isActiveProject,
   isCollapsed,
+  isDragging,
+  dragHandleProps,
 }: FeatureTabGroupProps) {
   const [workspace, setWorkspace] = useAtom(workspaceDataAtom);
   const [collapsedGroups, setCollapsedGroups] = useAtom(collapsedProjectGroupsAtom);
@@ -249,16 +254,20 @@ export function FeatureTabGroup({
     // Collapsed view: just project name with count
     return (
       <>
-        <div className="flex items-center flex-shrink-0">
+        <div className={`flex items-center flex-shrink-0 ${isDragging ? "opacity-50" : ""}`}>
           <ContextMenu>
             <ContextMenuTrigger asChild>
               <button
                 onClick={features.length > 0 ? toggleCollapsed : handleSelectProject}
-                onPointerDown={(e) => e.stopPropagation()}
-                className={`flex items-center gap-1.5 px-2 py-1 rounded-lg transition-colors ${
-                  isActiveProject ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-ink hover:bg-card-alt"
+                className={`flex items-center gap-1.5 px-2 py-1 rounded-lg transition-colors cursor-grab active:cursor-grabbing ${
+                  isDragging
+                    ? "bg-primary/20 shadow-lg"
+                    : isActiveProject
+                      ? "bg-primary/10 text-primary"
+                      : "text-muted-foreground hover:text-ink hover:bg-card-alt"
                 }`}
                 title={projectDisplayName}
+                {...dragHandleProps}
               >
                 <ProjectLogo projectPath={project.path} size="sm" />
                 {!hasLogo && (
@@ -286,22 +295,26 @@ export function FeatureTabGroup({
   // Expanded view: project header + tabs with underline indicator
   return (
     <>
-      <div className="flex items-center flex-shrink-0">
+      <div className={`flex items-center flex-shrink-0 ${isDragging ? "opacity-50" : ""}`}>
         <div
           className={`relative flex items-center gap-0.5 px-1 pb-1 after:absolute after:bottom-0 after:left-1 after:right-1 after:h-0.5 after:rounded-full ${
-            isActiveProject ? "after:bg-primary" : "after:bg-border"
+            isDragging
+              ? "bg-primary/10 rounded-lg after:bg-primary"
+              : isActiveProject
+                ? "after:bg-primary"
+                : "after:bg-border"
           }`}
         >
           {/* Project header with context menu */}
           <ContextMenu>
             <ContextMenuTrigger asChild>
               <button
                 onClick={features.length > 0 ? toggleCollapsed : handleSelectProject}
-                onPointerDown={(e) => e.stopPropagation()}
-                className={`flex items-center px-1 py-1 rounded transition-colors flex-shrink-0 ${
+                className={`flex items-center px-1 py-1 rounded transition-colors flex-shrink-0 cursor-grab active:cursor-grabbing ${
                   isActiveProject ? "text-primary" : "text-muted-foreground hover:text-ink"
                 }`}
                 title={projectDisplayName}
+                {...dragHandleProps}
               >
                 <ProjectLogo projectPath={project.path} size="sm" />
               </button>
@@ -354,3 +367,26 @@ export function FeatureTabGroup({
     </>
   );
 }
+
+// Sortable wrapper for drag-and-drop project groups
+export function SortableFeatureTabGroup(props: Omit<FeatureTabGroupProps, "isDragging" | "dragHandleProps">) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: `project-${props.project.id}` });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} className="flex-shrink-0">
+      <FeatureTabGroup {...props} isDragging={isDragging} dragHandleProps={listeners} />
+    </div>
+  );
+}