feat: add project

2026-03-16 16:12:35 +08:00
parent 1354a0cbc6
commit cec5fde098
23 changed files with 990 additions and 179 deletions
@@ -1,6 +1,7 @@
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout/legacy';
 import { useDashboardStore } from '../store/dashboardStore';
+import { useProjectStore } from '../store/projectStore';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { X } from "lucide-react";
@@ -39,7 +40,15 @@ function inferChartKeys(data: Record<string, unknown>[]) {
 }

 export function Dashboard() {
-  const { charts, removeChart, updateLayout } = useDashboardStore();
+  const { charts, removeChart, updateLayout, loadCharts } = useDashboardStore();
+  const { currentProject } = useProjectStore();
+
+  useEffect(() => {
+    if (currentProject) {
+      loadCharts(currentProject.id);
+    }
+  }, [currentProject, loadCharts]);
+
  const ResponsiveGridLayout = useMemo(
    () => WidthProvider(Responsive as any) as any,
    []
@@ -50,22 +59,33 @@ export function Dashboard() {
  }), [charts]);

  const onLayoutChange = (currentLayout: any[]) => {
-    updateLayout(
-      currentLayout.map((item) => ({
-        i: item.i,
-        x: item.x,
-        y: item.y,
-        w: item.w,
-        h: item.h,
-      }))
-    );
+    if (currentProject) {
+      updateLayout(
+        currentLayout.map((item) => ({
+          i: item.i,
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+        })),
+        currentProject.id
+      );
+    }
  };

+  if (!currentProject) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+        <p>请选择一个项目以查看仪表板。</p>
+      </div>
+    );
+  }
+
  if (charts.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
-        <p>No charts in dashboard.</p>
-        <p className="text-sm">Go to Chat and add some visualizations!</p>
+        <p>当前项目暂无图表。</p>
+        <p className="text-sm">前往对话页并添加可视化结果！</p>
      </div>
    );
  }
@@ -95,7 +115,7 @@ export function Dashboard() {
                  variant="ghost" 
                  size="icon" 
                  className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
-                  onClick={() => removeChart(chart.id)}
+                  onClick={() => removeChart(chart.id, currentProject.id)}
                >
                  <X className="h-4 w-4" />
                </Button>
@@ -2,9 +2,10 @@ import { useState, useEffect } from "react";
 import { api } from "@/lib/api";
 import { DataSourceForm, type DataSourceConfig } from "@/components/DataSourceForm";
 import { Button } from "@/components/ui/button";
-import { Plus, Database, Pencil, Trash2, Loader2 } from "lucide-react";
+import { Plus, Database, Pencil, Trash2, Loader2, FolderOpen } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { useAuthStore } from "@/store/authStore";
+import { useProjectStore } from "@/store/projectStore";
 import { useNavigate } from "react-router-dom";

 export function DataSources() {
@@ -13,20 +14,20 @@ export function DataSources() {
  const [isOpen, setIsOpen] = useState(false);
  const [editingDs, setEditingDs] = useState<DataSourceConfig | null>(null);
  const { user } = useAuthStore();
+  const { currentProject } = useProjectStore();
  const navigate = useNavigate();

  useEffect(() => {
-    if (!user?.is_admin) {
-      navigate("/");
-      return;
+    if (currentProject) {
+      fetchDataSources();
    }
-    fetchDataSources();
-  }, [user]);
+  }, [currentProject]);

  const fetchDataSources = async () => {
+    if (!currentProject) return;
    setIsLoading(true);
    try {
-      const data = await api.get<DataSourceConfig[]>("/api/v1/datasources");
+      const data = await api.get<DataSourceConfig[]>(`/api/v1/datasources?project_id=${currentProject.id}`);
      setDatasources(data);
    } catch (e) {
      console.error("Failed to fetch data sources", e);
@@ -56,11 +57,12 @@ export function DataSources() {
  };

  const handleSubmit = async (data: Omit<DataSourceConfig, "id">) => {
+    if (!currentProject) return;
    try {
      if (editingDs?.id) {
-        await api.put(`/api/v1/datasources/${editingDs.id}`, data);
+        await api.put(`/api/v1/datasources/${editingDs.id}`, { ...data, project_id: currentProject.id });
      } else {
-        await api.post("/api/v1/datasources", data);
+        await api.post("/api/v1/datasources", { ...data, project_id: currentProject.id });
      }
      setIsOpen(false);
      fetchDataSources();
@@ -0,0 +1,238 @@
+import React, { useEffect, useState } from 'react';
+import { Plus, Folder, Pencil, Trash2, Loader2, Database } from 'lucide-react';
+import { useProjectStore, type Project } from '@/store/projectStore';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { useNavigate } from 'react-router-dom';
+
+export function Projects() {
+  const { projects, loading, fetchProjects, addProject, updateProject, deleteProject, setCurrentProject } = useProjectStore();
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [editingProject, setEditingProject] = useState<Project | null>(null);
+  const [formData, setFormData] = useState({ name: '', description: '' });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  const handleCreate = async () => {
+    if (!formData.name.trim()) return;
+    setIsSubmitting(true);
+    try {
+      await addProject(formData.name, formData.description);
+      setFormData({ name: '', description: '' });
+      setIsCreateDialogOpen(false);
+    } catch (error) {
+      console.error('Failed to create project:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleUpdate = async () => {
+    if (!editingProject || !formData.name.trim()) return;
+    setIsSubmitting(true);
+    try {
+      await updateProject(editingProject.id, formData.name, formData.description);
+      setEditingProject(null);
+      setFormData({ name: '', description: '' });
+      setIsEditDialogOpen(false);
+    } catch (error) {
+      console.error('Failed to update project:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!window.confirm('Are you sure you want to delete this project? All associated data sources will be deleted.')) return;
+    try {
+      await deleteProject(id);
+    } catch (error) {
+      console.error('Failed to delete project:', error);
+    }
+  };
+
+  const openEditDialog = (project: Project) => {
+    setEditingProject(project);
+    setFormData({ name: project.name, description: project.description || '' });
+    setIsEditDialogOpen(true);
+  };
+
+  const goToDataSources = (project: Project) => {
+    setCurrentProject(project);
+    navigate('/datasources');
+  };
+
+  return (
+    <div className="flex-1 flex flex-col h-full bg-zinc-50/30 overflow-hidden">
+      <div className="h-14 px-6 flex items-center justify-between border-b border-zinc-100 bg-white">
+        <div className="flex items-center gap-2 text-zinc-700 font-medium">
+          <Folder className="h-5 w-5 text-blue-500" />
+          项目管理
+        </div>
+        <Button onClick={() => {
+          setFormData({ name: '', description: '' });
+          setIsCreateDialogOpen(true);
+        }} size="sm" className="gap-2">
+          <Plus className="h-4 w-4" />
+          新建项目
+        </Button>
+      </div>
+
+      <div className="flex-1 p-6 overflow-auto">
+        <div className="max-w-5xl mx-auto space-y-6">
+          <Card className="border-zinc-200 shadow-sm">
+            <CardHeader>
+              <CardTitle>项目列表</CardTitle>
+              <CardDescription>管理您的项目，不同项目拥有独立的数据源</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {loading && projects.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-zinc-400">
+                  <Loader2 className="h-8 w-8 animate-spin mb-4" />
+                  <p>加载中...</p>
+                </div>
+              ) : projects.length === 0 ? (
+                <div className="text-center py-12 border-2 border-dashed rounded-lg border-zinc-100">
+                  <Folder className="h-12 w-12 text-zinc-200 mx-auto mb-4" />
+                  <p className="text-zinc-500">暂无项目，请先创建一个</p>
+                </div>
+              ) : (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>名称</TableHead>
+                      <TableHead>描述</TableHead>
+                      <TableHead>创建时间</TableHead>
+                      <TableHead className="text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {projects.map((project) => (
+                      <TableRow key={project.id}>
+                        <TableCell className="font-medium">{project.name}</TableCell>
+                        <TableCell className="text-zinc-500 max-w-xs truncate">
+                          {project.description || '-'}
+                        </TableCell>
+                        <TableCell className="text-zinc-500">
+                          {new Date(project.created_at).toLocaleDateString()}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end gap-2">
+                            <Button 
+                              variant="ghost" 
+                              size="sm" 
+                              onClick={() => goToDataSources(project)}
+                              title="管理数据源"
+                            >
+                              <Database className="h-4 w-4 text-emerald-500" />
+                            </Button>
+                            <Button 
+                              variant="ghost" 
+                              size="sm" 
+                              onClick={() => openEditDialog(project)}
+                              title="编辑项目"
+                            >
+                              <Pencil className="h-4 w-4 text-blue-500" />
+                            </Button>
+                            <Button 
+                              variant="ghost" 
+                              size="sm" 
+                              onClick={() => handleDelete(project.id)}
+                              title="删除项目"
+                            >
+                              <Trash2 className="h-4 w-4 text-red-500" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Create Dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>新建项目</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="name">项目名称</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder="输入项目名称"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="description">描述 (可选)</Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                placeholder="输入项目描述"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>取消</Button>
+            <Button onClick={handleCreate} disabled={isSubmitting || !formData.name.trim()}>
+              {isSubmitting ? '创建中...' : '创建'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Dialog */}
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>编辑项目</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="edit-name">项目名称</Label>
+              <Input
+                id="edit-name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder="输入项目名称"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="edit-description">描述 (可选)</Label>
+              <Textarea
+                id="edit-description"
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                placeholder="输入项目描述"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>取消</Button>
+            <Button onClick={handleUpdate} disabled={isSubmitting || !formData.name.trim()}>
+              {isSubmitting ? '保存中...' : '保存'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
@@ -2,13 +2,14 @@ import { useState, useEffect } from 'react';
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { Trash2, Edit2, Plus, Terminal, Loader2 } from "lucide-react";
+import { Trash2, Edit2, Plus, Terminal, Loader2, FolderOpen } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { api } from "@/lib/api";
+import { useProjectStore } from "@/store/projectStore";

 interface Skill {
  id: string;
@@ -16,22 +17,28 @@ interface Skill {
  description: string;
  content: string;
  type: 'python' | 'sql' | 'api';
+  project_id?: number;
 }

 export function Skills() {
  const [skills, setSkills] = useState<Skill[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [editingSkill, setEditingSkill] = useState<Skill | null>(null);
  const [newSkill, setNewSkill] = useState<Partial<Skill>>({ type: 'python', content: '' });
+  const { currentProject } = useProjectStore();

  useEffect(() => {
-    fetchSkills();
-  }, []);
+    if (currentProject) {
+      fetchSkills();
+    }
+  }, [currentProject]);

  const fetchSkills = async () => {
+    if (!currentProject) return;
    setIsLoading(true);
    try {
-        const data = await api.get<Skill[]>('/api/v1/skills');
+        const data = await api.get<Skill[]>(`/api/v1/skills?project_id=${currentProject.id}`);
        setSkills(data);
    } catch (error) {
        console.error("Failed to fetch skills", error);
@@ -41,52 +48,90 @@ export function Skills() {
  };

  const handleAddSkill = async () => {
+    if (!currentProject) return;
    if (newSkill.name && newSkill.description && newSkill.content) {
      try {
-          const skillToCreate = {
-              ...newSkill,
-              id: Date.now().toString(),
-          };
-          const createdSkill = await api.post<Skill>('/api/v1/skills', skillToCreate);
-          setSkills([...skills, createdSkill]);
+          if (editingSkill) {
+              const updatedSkill = await api.put<Skill>(`/api/v1/skills/${editingSkill.id}?project_id=${currentProject.id}`, {
+                  ...newSkill,
+                  project_id: currentProject.id
+              });
+              setSkills(skills.map(s => s.id === editingSkill.id ? updatedSkill : s));
+          } else {
+              const skillToCreate = {
+                  ...newSkill,
+                  id: Date.now().toString(),
+                  project_id: currentProject.id
+              };
+              const createdSkill = await api.post<Skill>('/api/v1/skills', skillToCreate);
+              setSkills([...skills, createdSkill]);
+          }
          setNewSkill({ type: 'python', content: '' });
+          setEditingSkill(null);
          setIsDialogOpen(false);
      } catch (error) {
-          console.error("Failed to create skill", error);
+          console.error("Failed to save skill", error);
      }
    }
  };

+  const handleEditSkill = (skill: Skill) => {
+    setEditingSkill(skill);
+    setNewSkill(skill);
+    setIsDialogOpen(true);
+  };
+
  const handleDeleteSkill = async (id: string) => {
+    if (!currentProject) return;
+    if (!window.confirm("确定要删除这个技能吗？")) return;
    try {
-        await api.delete(`/api/v1/skills/${id}`);
+        await api.delete(`/api/v1/skills/${id}?project_id=${currentProject.id}`);
        setSkills(skills.filter(s => s.id !== id));
    } catch (error) {
        console.error("Failed to delete skill", error);
    }
  };

+  if (!currentProject) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center text-zinc-500 gap-4">
+        <FolderOpen className="h-12 w-12 text-zinc-200" />
+        <p>请先在顶部选择一个项目以管理其技能</p>
+      </div>
+    );
+  }
+
  return (
    <div className="p-6 h-full flex flex-col overflow-hidden">
      <div className="flex justify-between items-center mb-6 shrink-0">
        <div>
-          <h1 className="text-2xl font-bold">Skills</h1>
-          <p className="text-muted-foreground">Manage AI capabilities and tools</p>
+          <h1 className="text-2xl font-bold">技能管理 - {currentProject.name}</h1>
+          <p className="text-muted-foreground">管理该项目的 AI 技能和工具</p>
        </div>
-        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <Dialog open={isDialogOpen} onOpenChange={(open) => {
+            setIsDialogOpen(open);
+            if (!open) {
+                setEditingSkill(null);
+                setNewSkill({ type: 'python', content: '' });
+            }
+        }}>
          <DialogTrigger render={
-            <Button>
+            <Button onClick={() => {
+                setEditingSkill(null);
+                setNewSkill({ type: 'python', content: '' });
+                setIsDialogOpen(true);
+            }}>
              <Plus className="h-4 w-4 mr-2" />
-              Add Skill
+              添加技能
            </Button>
          } />
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
-              <DialogTitle>Add New Skill</DialogTitle>
+              <DialogTitle>{editingSkill ? '编辑技能' : '添加新技能'}</DialogTitle>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="name" className="text-right">Name</Label>
+                <Label htmlFor="name" className="text-right">名称</Label>
                <Input 
                  id="name" 
                  value={newSkill.name || ''} 
@@ -95,13 +140,13 @@ export function Skills() {
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="type" className="text-right">Type</Label>
+                <Label htmlFor="type" className="text-right">类型</Label>
                <Select 
                    value={newSkill.type} 
                    onValueChange={(val: any) => setNewSkill({...newSkill, type: val})}
                >
                    <SelectTrigger className="col-span-3">
-                        <SelectValue placeholder="Select type" />
+                        <SelectValue placeholder="选择类型" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="python">Python</SelectItem>
@@ -111,7 +156,7 @@ export function Skills() {
                </Select>
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="description" className="text-right">Description</Label>
+                <Label htmlFor="description" className="text-right">描述</Label>
                <Textarea 
                  id="description" 
                  value={newSkill.description || ''} 
@@ -120,18 +165,18 @@ export function Skills() {
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="content" className="text-right">Content</Label>
+                <Label htmlFor="content" className="text-right">内容</Label>
                <Textarea 
                  id="content" 
                  value={newSkill.content || ''} 
                  onChange={(e) => setNewSkill({...newSkill, content: e.target.value})}
                  className="col-span-3 font-mono text-xs" 
-                  placeholder="Python code, SQL query template, or API spec..."
+                  placeholder="Python 代码、SQL 查询模板或 API 规范..."
                />
              </div>
            </div>
            <DialogFooter>
-              <Button onClick={handleAddSkill}>Save Skill</Button>
+              <Button onClick={handleAddSkill}>保存技能</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
@@ -155,7 +200,12 @@ export function Skills() {
                    <CardDescription>{skill.type.toUpperCase()}</CardDescription>
                    </div>
                    <div className="flex gap-1">
-                    <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-foreground">
+                    <Button 
+                        variant="ghost" 
+                        size="icon" 
+                        className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                        onClick={() => handleEditSkill(skill)}
+                    >
                        <Edit2 className="h-4 w-4" />
                    </Button>
                    <Button 
@@ -169,12 +219,16 @@ export function Skills() {
                    </div>
                </CardHeader>
                <CardContent>
-                    <p className="text-sm text-muted-foreground line-clamp-2">
-                    {skill.description}
-                    </p>
+                    <p className="text-sm text-muted-foreground line-clamp-2">{skill.description}</p>
                </CardContent>
                </Card>
            ))}
+            {skills.length === 0 && (
+                <div className="col-span-full py-12 text-center text-zinc-500 bg-zinc-50 rounded-xl border-2 border-dashed border-zinc-100">
+                    <Terminal className="h-12 w-12 mx-auto mb-4 opacity-20" />
+                    <p>该项目尚无技能，点击“添加技能”开始</p>
+                </div>
+            )}
            </div>
        )}
      </ScrollArea>