feat: draggle cards for kb and db

frontend/package-lock.json

@@ -9,6 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@base-ui/react": "^1.3.0",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@fontsource-variable/geist": "^5.2.8",
         "@tailwindcss/postcss": "^4.2.1",
         "@types/dagre": "^0.7.54",
@@ -593,6 +596,59 @@
         }
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@dotenvx/dotenvx": {
       "version": "1.55.1",
       "resolved": "https://registry.npmmirror.com/@dotenvx/dotenvx/-/dotenvx-1.55.1.tgz",

frontend/package.json

@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/geist": "^5.2.8",
     "@tailwindcss/postcss": "^4.2.1",
     "@types/dagre": "^0.7.54",

frontend/src/pages/DataSources.tsx

@@ -3,10 +3,27 @@ import { useTranslation } from 'react-i18next';
 import { api } from "@/lib/api";
 import { DataSourceForm, type DataSourceConfig } from "@/components/DataSourceForm";
 import { Button } from "@/components/ui/button";
-import { Plus, Database, Pencil, Trash2, Loader2, Info, ChevronLeft, FileText, Search, Network } from "lucide-react";
+import { Plus, Database, Pencil, Trash2, Loader2, Info, ChevronLeft, FileText, Search, Network, GripVertical } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { useProjectStore } from "@/store/projectStore";
 import { useNavigate } from "react-router-dom";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+  useSortable
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 
 const SOURCE_TYPES = [
   { id: "csv", name: "CSV Upload", icon: <FileText className="h-6 w-6 text-green-600" /> },
@@ -51,6 +68,24 @@ export function DataSources() {
     setIsLoading(true);
     try {
       const data = await api.get<DataSourceConfig[]>(`/api/v1/datasources?project_id=${currentProject.id}`);
+      // 从 localStorage 中恢复顺序
+      const savedOrderStr = localStorage.getItem(`datasources_order_${currentProject.id}`);
+      if (savedOrderStr) {
+        try {
+          const savedOrder = JSON.parse(savedOrderStr) as string[];
+          // 按照保存的 ID 顺序重新排列，同时把新添加的数据源放在末尾
+          data.sort((a, b) => {
+            const indexA = savedOrder.indexOf(a.id as unknown as string);
+            const indexB = savedOrder.indexOf(b.id as unknown as string);
+            if (indexA === -1 && indexB === -1) return 0;
+            if (indexA === -1) return 1;
+            if (indexB === -1) return -1;
+            return indexA - indexB;
+          });
+        } catch (e) {
+          console.error("Failed to parse saved datasource order", e);
+        }
+      }
       setDatasources(data);
     } catch (e) {
       console.error("Failed to fetch data sources", e);
@@ -202,6 +237,113 @@ export function DataSources() {
     }
   };
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // Require 8px movement before drag starts to avoid accidental drags
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setDatasources((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        
+        const newItems = arrayMove(items, oldIndex, newIndex);
+        
+        // 保存新的顺序到 localStorage
+        if (currentProject) {
+          localStorage.setItem(
+            `datasources_order_${currentProject.id}`, 
+            JSON.stringify(newItems.map(i => i.id))
+          );
+        }
+        
+        return newItems;
+      });
+    }
+  };
+
+  // Sortable Item Component
+  const SortableDataSourceCard = ({ ds }: { ds: DataSourceConfig }) => {
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging
+    } = useSortable({ id: ds.id! });
+
+    const style = {
+      transform: CSS.Transform.toString(transform),
+      transition,
+    };
+
+    return (
+      <div 
+        ref={setNodeRef}
+        style={style}
+        className={`group relative bg-background border border-border rounded-xl p-5 hover:shadow-md transition-all hover:border-border
+          ${isDragging ? 'opacity-50 z-50 ring-2 ring-indigo-500 shadow-xl' : ''}
+        `}
+      >
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <div 
+              {...attributes} 
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing p-1 -ml-2 text-muted-foreground/50 hover:text-foreground/80 transition-colors"
+              title="Drag to reorder"
+            >
+              <GripVertical className="h-5 w-5" />
+            </div>
+            <div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600">
+              <Database className="h-5 w-5" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-foreground">{ds.name}</h3>
+              <p className="text-xs text-muted-foreground font-mono mt-0.5 uppercase">{ds.type}</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-blue-600" onClick={() => navigate(`/modeling/${ds.id}`)} title="Data Modeling">
+              <Network className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-muted-foreground" onClick={() => handleEdit(ds)}>
+              <Pencil className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-red-600 hover:bg-red-50" onClick={() => handleDelete(ds.id!)}>
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        
+        <div className="space-y-2 ml-8">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">Host</span>
+            <span className="font-medium text-foreground/80 truncate max-w-[150px]" title={ds.config.host || ds.config.connection_string || "Local / File"}>
+              {ds.config.host || parseConnectionString(ds.config.connection_string, 'host') || "Local / File"}
+            </span>
+          </div>
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">Database</span>
+            <span className="font-medium text-foreground/80 truncate max-w-[150px]" title={ds.config.database || (ds.config.file_path ? ds.config.file_path.split('/').pop() : ds.config.connection_string || "-")}>
+              {ds.config.database || parseConnectionString(ds.config.connection_string, 'database') || (ds.config.file_path ? ds.config.file_path.split('/').pop() : "-")}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="h-full flex flex-col bg-background">
       <div className="border-b border-border px-8 py-5 flex items-center justify-between">
@@ -227,52 +369,22 @@ export function DataSources() {
             <p className="text-muted-foreground text-sm mt-1">{t('clickTopRightToAddFirstDataSource')}</p>
           </div>
         ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext 
+              items={datasources.map(ds => ds.id!)}
+              strategy={rectSortingStrategy}
+            >
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {datasources.map((ds) => (
-              <div 
+                  <SortableDataSourceCard key={ds.id} ds={ds} />
-                key={ds.id} 
-                className="group relative bg-background border border-border rounded-xl p-5 hover:shadow-md transition-all hover:border-border"
-              >
-                <div className="flex items-start justify-between mb-4">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600">
-                      <Database className="h-5 w-5" />
-                    </div>
-                    <div>
-                      <h3 className="font-semibold text-foreground">{ds.name}</h3>
-                      <p className="text-xs text-muted-foreground font-mono mt-0.5 uppercase">{ds.type}</p>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-blue-600" onClick={() => navigate(`/modeling/${ds.id}`)} title="Data Modeling">
-                    <Network className="h-4 w-4" />
-                  </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-muted-foreground" onClick={() => handleEdit(ds)}>
-                    <Pencil className="h-4 w-4" />
-                  </Button>
-                    <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-red-600 hover:bg-red-50" onClick={() => handleDelete(ds.id!)}>
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </div>
-                
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">Host</span>
-                    <span className="font-medium text-foreground/80 truncate max-w-[150px]" title={ds.config.host || ds.config.connection_string || "Local / File"}>
-                      {ds.config.host || parseConnectionString(ds.config.connection_string, 'host') || "Local / File"}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">Database</span>
-                    <span className="font-medium text-foreground/80 truncate max-w-[150px]" title={ds.config.database || (ds.config.file_path ? ds.config.file_path.split('/').pop() : ds.config.connection_string || "-")}>
-                      {ds.config.database || parseConnectionString(ds.config.connection_string, 'database') || (ds.config.file_path ? ds.config.file_path.split('/').pop() : "-")}
-                    </span>
-                  </div>
-                </div>
-              </div>
                 ))}
               </div>
+            </SortableContext>
+          </DndContext>
         )}
       </div>
 

frontend/src/pages/KnowledgeBases.tsx

@@ -4,11 +4,28 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Save, Loader2, RefreshCw, Pencil, Trash2, FileText, Plus, BookOpen } from "lucide-react";
+import { Save, Loader2, RefreshCw, Pencil, Trash2, FileText, Plus, BookOpen, GripVertical } from "lucide-react";
 import { api } from "@/lib/api";
 import { useProjectStore } from "@/store/projectStore";
 import { Textarea } from "@/components/ui/textarea";
 import { KnowledgeBaseForm, type KnowledgeBaseFormValues } from "@/components/KnowledgeBaseForm";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+  useSortable
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 
 interface KnowledgeBase {
   id: string;
@@ -76,6 +93,25 @@ export function KnowledgeBases() {
     setIsLoading(true);
     try {
       const data = await api.get<KnowledgeBase[]>(`/api/v1/knowledge-bases?project_id=${currentProject.id}`);
+      
+      // 从 localStorage 中恢复顺序
+      const savedOrderStr = localStorage.getItem(`knowledge_bases_order_${currentProject.id}`);
+      if (savedOrderStr) {
+        try {
+          const savedOrder = JSON.parse(savedOrderStr) as string[];
+          data.sort((a, b) => {
+            const indexA = savedOrder.indexOf(a.id);
+            const indexB = savedOrder.indexOf(b.id);
+            if (indexA === -1 && indexB === -1) return 0;
+            if (indexA === -1) return 1;
+            if (indexB === -1) return -1;
+            return indexA - indexB;
+          });
+        } catch (e) {
+          console.error("Failed to parse saved kb order", e);
+        }
+      }
+      
       setKnowledgeBases(data);
     } catch (err: any) {
       console.error(err);
@@ -247,44 +283,73 @@ export function KnowledgeBases() {
     }
   };
 
-  return (
+  const sensors = useSensors(
-    <div className="h-full flex flex-col bg-background">
+    useSensor(PointerSensor, {
-      <div className="border-b border-border px-8 py-5 flex items-center justify-between">
+      activationConstraint: {
-        <div>
+        distance: 8,
-          <h1 className="text-2xl font-bold text-foreground">{t('knowledgeBases')}</h1>
+      },
-          <p className="text-sm text-muted-foreground mt-1">{t('knowledgeBaseSettingsDesc', 'Manage knowledge bases and their documents')}</p>
+    }),
-        </div>
+    useSensor(KeyboardSensor, {
-        <Button onClick={handleCreateKb} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground gap-2" disabled={!currentProject}>
+      coordinateGetter: sortableKeyboardCoordinates,
-          <Plus className="h-4 w-4" />
+    })
-          {t('createKnowledgeBase', 'New Knowledge Base')}
+  );
-        </Button>
-      </div>
 
-      <div className="flex-1 overflow-auto p-8">
+  const handleDragEnd = (event: DragEndEvent) => {
-        {!currentProject ? (
+    const { active, over } = event;
-          <div className="flex justify-center items-center h-64">
+
-             <div className="text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-md p-4">
+    if (over && active.id !== over.id) {
-              {t('selectProjectBeforeManageKnowledgeBase')}
+      setKnowledgeBases((items) => {
-            </div>
+        const oldIndex = items.findIndex((item) => item.id === active.id);
-          </div>
+        const newIndex = items.findIndex((item) => item.id === over.id);
-        ) : isLoading ? (
+        
-          <div className="flex justify-center items-center h-64">
+        const newItems = arrayMove(items, oldIndex, newIndex);
-            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        
-          </div>
+        // 保存新的顺序到 localStorage
-        ) : knowledgeBases.length === 0 ? (
+        if (currentProject) {
-          <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-border rounded-xl bg-muted/50/50">
+          localStorage.setItem(
-            <BookOpen className="h-10 w-10 text-muted-foreground/50 mb-3" />
+            `knowledge_bases_order_${currentProject.id}`, 
-            <p className="text-muted-foreground font-medium">{t('noKnowledgeBases')}</p>
+            JSON.stringify(newItems.map(i => i.id))
-          </div>
+          );
-        ) : (
+        }
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        
-            {knowledgeBases.map((kb) => (
+        return newItems;
+      });
+    }
+  };
+
+  const SortableKbCard = ({ kb }: { kb: KnowledgeBase }) => {
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging
+    } = useSortable({ id: kb.id });
+
+    const style = {
+      transform: CSS.Transform.toString(transform),
+      transition,
+    };
+
+    return (
       <div 
-                key={kb.id} 
+        ref={setNodeRef}
-                className="group relative bg-background border border-border rounded-xl p-5 hover:shadow-md transition-all hover:border-border"
+        style={style}
+        className={`group relative bg-background border border-border rounded-xl p-5 hover:shadow-md transition-all hover:border-border
+          ${isDragging ? 'opacity-50 z-50 ring-2 ring-indigo-500 shadow-xl' : ''}
+        `}
       >
         <div className="flex items-start justify-between mb-4">
           <div className="flex items-center gap-3">
+            <div 
+              {...attributes} 
+              {...listeners}
+              className="cursor-grab active:cursor-grabbing p-1 -ml-2 text-muted-foreground/50 hover:text-foreground/80 transition-colors"
+              title="Drag to reorder"
+            >
+              <GripVertical className="h-5 w-5" />
+            </div>
             <div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600">
               <BookOpen className="h-5 w-5" />
             </div>
@@ -316,7 +381,7 @@ export function KnowledgeBases() {
           </div>
         </div>
         
-                <div className="space-y-2">
+        <div className="space-y-2 ml-8">
           <div className="flex items-center justify-between text-sm">
             <span className="text-muted-foreground">Model</span>
             <span className="font-medium text-foreground/80 truncate max-w-[150px]" title={kb.embedding_model || 'Default'}>
@@ -336,8 +401,55 @@ export function KnowledgeBases() {
           )}
         </div>
       </div>
+    );
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-background">
+      <div className="border-b border-border px-8 py-5 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">{t('knowledgeBases')}</h1>
+          <p className="text-sm text-muted-foreground mt-1">{t('knowledgeBaseSettingsDesc', 'Manage knowledge bases and their documents')}</p>
+        </div>
+        <Button onClick={handleCreateKb} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground gap-2" disabled={!currentProject}>
+          <Plus className="h-4 w-4" />
+          {t('createKnowledgeBase', 'New Knowledge Base')}
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-8">
+        {!currentProject ? (
+          <div className="flex justify-center items-center h-64">
+             <div className="text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-md p-4">
+              {t('selectProjectBeforeManageKnowledgeBase')}
+            </div>
+          </div>
+        ) : isLoading ? (
+          <div className="flex justify-center items-center h-64">
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          </div>
+        ) : knowledgeBases.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-border rounded-xl bg-muted/50/50">
+            <BookOpen className="h-10 w-10 text-muted-foreground/50 mb-3" />
+            <p className="text-muted-foreground font-medium">{t('noKnowledgeBases')}</p>
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext 
+              items={knowledgeBases.map(kb => kb.id)}
+              strategy={rectSortingStrategy}
+            >
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {knowledgeBases.map((kb) => (
+                  <SortableKbCard key={kb.id} kb={kb} />
                 ))}
               </div>
+            </SortableContext>
+          </DndContext>
         )}
       </div>