From 281ab2c9e74df1500edf7c55d48ba442a5b364b3 Mon Sep 17 00:00:00 2001
From: lintsinghua <1930438860@qq.com>
Date: Mon, 27 Oct 2025 18:01:33 +0800
Subject: [PATCH] feat: add project management features including recycle bin
 and project editing

- Introduced a new Recycle Bin page for managing deleted projects.
- Implemented project editing functionality with a dialog for updating project details.
- Added methods for retrieving deleted projects and restoring or permanently deleting them from the database.
- Enhanced the Projects page with edit and delete options for better project management.
---
 src/app/routes.tsx                 |   7 +
 src/pages/ProjectDetail.tsx        | 195 ++++++++++++++++-
 src/pages/Projects.tsx             | 250 +++++++++++++++++++++-
 src/pages/RecycleBin.tsx           | 322 +++++++++++++++++++++++++++++
 src/shared/config/database.ts      |  54 +++++
 src/shared/config/localDatabase.ts |  37 ++++
 6 files changed, 857 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/RecycleBin.tsx

diff --git a/src/app/routes.tsx b/src/app/routes.tsx
index 4a272b6..77a72b9 100644
--- a/src/app/routes.tsx
+++ b/src/app/routes.tsx
@@ -1,6 +1,7 @@
 import Dashboard from "@/pages/Dashboard";
 import Projects from "@/pages/Projects";
 import ProjectDetail from "@/pages/ProjectDetail";
+import RecycleBin from "@/pages/RecycleBin";
 import InstantAnalysis from "@/pages/InstantAnalysis";
 import AuditTasks from "@/pages/AuditTasks";
 import TaskDetail from "@/pages/TaskDetail";
@@ -57,6 +58,12 @@ const routes: RouteConfig[] = [
     element: <AdminDashboard />,
     visible: true,
   },
+  {
+    name: "回收站",
+    path: "/recycle-bin",
+    element: <RecycleBin />,
+    visible: true,
+  },
 ];
 
 export default routes;
\ No newline at end of file
diff --git a/src/pages/ProjectDetail.tsx b/src/pages/ProjectDetail.tsx
index f346fb8..292d51f 100644
--- a/src/pages/ProjectDetail.tsx
+++ b/src/pages/ProjectDetail.tsx
@@ -3,11 +3,16 @@ import { useParams, Link } from "react-router-dom";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Progress } from "@/components/ui/progress";
 import { 
   ArrowLeft, 
-  Settings, 
+  Edit, 
   ExternalLink,
   Code,
   Shield,
@@ -20,7 +25,7 @@ import {
 } from "lucide-react";
 import { api } from "@/shared/config/database";
 import { runRepositoryAudit } from "@/features/projects/services";
-import type { Project, AuditTask } from "@/shared/types";
+import type { Project, AuditTask, CreateProjectForm } from "@/shared/types";
 import { toast } from "sonner";
 import CreateTaskDialog from "@/components/audit/CreateTaskDialog";
 import TerminalProgressDialog from "@/components/audit/TerminalProgressDialog";
@@ -34,6 +39,19 @@ export default function ProjectDetail() {
   const [showCreateTaskDialog, setShowCreateTaskDialog] = useState(false);
   const [showTerminalDialog, setShowTerminalDialog] = useState(false);
   const [currentTaskId, setCurrentTaskId] = useState<string | null>(null);
+  const [showSettingsDialog, setShowSettingsDialog] = useState(false);
+  const [editForm, setEditForm] = useState<CreateProjectForm>({
+    name: "",
+    description: "",
+    repository_url: "",
+    repository_type: "github",
+    default_branch: "main",
+    programming_languages: []
+  });
+
+  const supportedLanguages = [
+    'JavaScript', 'TypeScript', 'Python', 'Java', 'Go', 'Rust', 'C++', 'C#', 'PHP', 'Ruby'
+  ];
 
   useEffect(() => {
     if (id) {
@@ -94,6 +112,50 @@ export default function ProjectDetail() {
     }
   };
 
+  const handleOpenSettings = () => {
+    if (!project) return;
+    
+    // 初始化编辑表单
+    setEditForm({
+      name: project.name,
+      description: project.description || "",
+      repository_url: project.repository_url || "",
+      repository_type: project.repository_type || "github",
+      default_branch: project.default_branch || "main",
+      programming_languages: project.programming_languages ? JSON.parse(project.programming_languages) : []
+    });
+    
+    setShowSettingsDialog(true);
+  };
+
+  const handleSaveSettings = async () => {
+    if (!id) return;
+    
+    if (!editForm.name.trim()) {
+      toast.error("项目名称不能为空");
+      return;
+    }
+
+    try {
+      await api.updateProject(id, editForm);
+      toast.success("项目信息已保存");
+      setShowSettingsDialog(false);
+      loadProjectData();
+    } catch (error) {
+      console.error('Failed to update project:', error);
+      toast.error("保存失败");
+    }
+  };
+
+  const handleToggleLanguage = (lang: string) => {
+    const currentLanguages = editForm.programming_languages || [];
+    const newLanguages = currentLanguages.includes(lang)
+      ? currentLanguages.filter(l => l !== lang)
+      : [...currentLanguages, lang];
+    
+    setEditForm({ ...editForm, programming_languages: newLanguages });
+  };
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'completed': return 'bg-green-100 text-green-800';
@@ -187,9 +249,9 @@ export default function ProjectDetail() {
             <Shield className="w-4 h-4 mr-2" />
             {scanning ? '正在启动...' : '启动审计'}
           </Button>
-          <Button variant="outline">
-            <Settings className="w-4 h-4 mr-2" />
-            设置
+          <Button variant="outline" onClick={handleOpenSettings}>
+            <Edit className="w-4 h-4 mr-2" />
+            编辑
           </Button>
         </div>
       </div>
@@ -470,8 +532,8 @@ export default function ProjectDetail() {
 
         <TabsContent value="settings" className="space-y-6">
           <div className="text-center py-12">
-            <Settings className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-muted-foreground mb-2">项目设置</h3>
+            <Edit className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-muted-foreground mb-2">项目编辑</h3>
             <p className="text-sm text-muted-foreground">此功能正在开发中</p>
           </div>
         </TabsContent>
@@ -492,6 +554,125 @@ export default function ProjectDetail() {
         taskId={currentTaskId}
         taskType="repository"
       />
+
+      {/* 项目编辑对话框 */}
+      <Dialog open={showSettingsDialog} onOpenChange={setShowSettingsDialog}>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>编辑项目</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-6 py-4">
+            {/* 基本信息 */}
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="edit-name">项目名称 *</Label>
+                <Input
+                  id="edit-name"
+                  value={editForm.name}
+                  onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
+                  placeholder="输入项目名称"
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="edit-description">项目描述</Label>
+                <Textarea
+                  id="edit-description"
+                  value={editForm.description}
+                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
+                  placeholder="输入项目描述"
+                  rows={3}
+                />
+              </div>
+            </div>
+
+            {/* 仓库信息 */}
+            <div className="space-y-4">
+              <h3 className="text-sm font-semibold text-gray-900">仓库信息</h3>
+              
+              <div>
+                <Label htmlFor="edit-repo-url">仓库地址</Label>
+                <Input
+                  id="edit-repo-url"
+                  value={editForm.repository_url}
+                  onChange={(e) => setEditForm({ ...editForm, repository_url: e.target.value })}
+                  placeholder="https://github.com/username/repo"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="edit-repo-type">仓库类型</Label>
+                  <Select
+                    value={editForm.repository_type}
+                    onValueChange={(value: any) => setEditForm({ ...editForm, repository_type: value })}
+                  >
+                    <SelectTrigger id="edit-repo-type">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="github">GitHub</SelectItem>
+                      <SelectItem value="gitlab">GitLab</SelectItem>
+                      <SelectItem value="other">其他</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <Label htmlFor="edit-branch">默认分支</Label>
+                  <Input
+                    id="edit-branch"
+                    value={editForm.default_branch}
+                    onChange={(e) => setEditForm({ ...editForm, default_branch: e.target.value })}
+                    placeholder="main"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* 编程语言 */}
+            <div className="space-y-4">
+              <h3 className="text-sm font-semibold text-gray-900">编程语言</h3>
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                {supportedLanguages.map((lang) => (
+                  <div
+                    key={lang}
+                    className={`flex items-center space-x-2 p-3 rounded-lg border cursor-pointer transition-all ${
+                      editForm.programming_languages?.includes(lang)
+                        ? 'border-primary bg-red-50'
+                        : 'border-gray-200 hover:border-gray-300'
+                    }`}
+                    onClick={() => handleToggleLanguage(lang)}
+                  >
+                    <div
+                      className={`w-4 h-4 rounded border flex items-center justify-center ${
+                        editForm.programming_languages?.includes(lang)
+                          ? 'bg-primary border-primary'
+                          : 'border-gray-300'
+                      }`}
+                    >
+                      {editForm.programming_languages?.includes(lang) && (
+                        <CheckCircle className="w-3 h-3 text-white" />
+                      )}
+                    </div>
+                    <span className="text-sm font-medium">{lang}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end space-x-3 pt-4 border-t">
+            <Button variant="outline" onClick={() => setShowSettingsDialog(false)}>
+              取消
+            </Button>
+            <Button onClick={handleSaveSettings}>
+              保存修改
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 97e4e04..589d551 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -7,6 +7,7 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Progress } from "@/components/ui/progress";
 import {
@@ -22,7 +23,10 @@ import {
   Activity,
   Upload,
   FileText,
-  AlertCircle
+  AlertCircle,
+  Trash2,
+  Edit,
+  CheckCircle
 } from "lucide-react";
 import { api } from "@/shared/config/database";
 import { scanZipFile, validateZipFile } from "@/features/projects/services";
@@ -44,6 +48,18 @@ export default function Projects() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [showTerminalDialog, setShowTerminalDialog] = useState(false);
   const [currentTaskId, setCurrentTaskId] = useState<string | null>(null);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [projectToDelete, setProjectToDelete] = useState<Project | null>(null);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [projectToEdit, setProjectToEdit] = useState<Project | null>(null);
+  const [editForm, setEditForm] = useState<CreateProjectForm>({
+    name: "",
+    description: "",
+    repository_url: "",
+    repository_type: "github",
+    default_branch: "main",
+    programming_languages: []
+  });
   const [createForm, setCreateForm] = useState<CreateProjectForm>({
     name: "",
     description: "",
@@ -199,6 +215,71 @@ export default function Projects() {
     setShowCreateTaskDialog(true);
   };
 
+  const handleEditClick = (project: Project) => {
+    setProjectToEdit(project);
+    setEditForm({
+      name: project.name,
+      description: project.description || "",
+      repository_url: project.repository_url || "",
+      repository_type: project.repository_type || "github",
+      default_branch: project.default_branch || "main",
+      programming_languages: project.programming_languages ? JSON.parse(project.programming_languages) : []
+    });
+    setShowEditDialog(true);
+  };
+
+  const handleSaveEdit = async () => {
+    if (!projectToEdit) return;
+
+    if (!editForm.name.trim()) {
+      toast.error("项目名称不能为空");
+      return;
+    }
+
+    try {
+      await api.updateProject(projectToEdit.id, editForm);
+      toast.success(`项目 "${editForm.name}" 已更新`);
+      setShowEditDialog(false);
+      setProjectToEdit(null);
+      loadProjects();
+    } catch (error) {
+      console.error('Failed to update project:', error);
+      toast.error("更新项目失败");
+    }
+  };
+
+  const handleToggleLanguage = (lang: string) => {
+    const currentLanguages = editForm.programming_languages || [];
+    const newLanguages = currentLanguages.includes(lang)
+      ? currentLanguages.filter(l => l !== lang)
+      : [...currentLanguages, lang];
+    
+    setEditForm({ ...editForm, programming_languages: newLanguages });
+  };
+
+  const handleDeleteClick = (project: Project) => {
+    setProjectToDelete(project);
+    setShowDeleteDialog(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!projectToDelete) return;
+
+    try {
+      await api.deleteProject(projectToDelete.id);
+      toast.success(`项目 "${projectToDelete.name}" 已移到回收站`, {
+        description: '您可以在回收站中恢复此项目',
+        duration: 4000
+      });
+      setShowDeleteDialog(false);
+      setProjectToDelete(null);
+      loadProjects();
+    } catch (error) {
+      console.error('Failed to delete project:', error);
+      toast.error("删除项目失败");
+    }
+  };
+
   const handleTaskCreated = () => {
     toast.success("审计任务已创建", {
       description: '因为网络和代码文件大小等因素，审计时长通常至少需要1分钟，请耐心等待...',
@@ -571,6 +652,22 @@ export default function Projects() {
                     <Shield className="w-4 h-4 mr-2" />
                     新建任务
                   </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="text-blue-600 hover:text-blue-700 hover:bg-blue-50"
+                    onClick={() => handleEditClick(project)}
+                  >
+                    <Edit className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                    onClick={() => handleDeleteClick(project)}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
                 </div>
               </CardContent>
             </Card>
@@ -676,6 +773,157 @@ export default function Projects() {
         taskId={currentTaskId}
         taskType="zip"
       />
+
+      {/* 编辑项目对话框 */}
+      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>编辑项目</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-6 py-4">
+            {/* 基本信息 */}
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="edit-name">项目名称 *</Label>
+                <Input
+                  id="edit-name"
+                  value={editForm.name}
+                  onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
+                  placeholder="输入项目名称"
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="edit-description">项目描述</Label>
+                <Textarea
+                  id="edit-description"
+                  value={editForm.description}
+                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
+                  placeholder="输入项目描述"
+                  rows={3}
+                />
+              </div>
+            </div>
+
+            {/* 仓库信息 */}
+            <div className="space-y-4">
+              <h3 className="text-sm font-semibold text-gray-900">仓库信息</h3>
+              
+              <div>
+                <Label htmlFor="edit-repo-url">仓库地址</Label>
+                <Input
+                  id="edit-repo-url"
+                  value={editForm.repository_url}
+                  onChange={(e) => setEditForm({ ...editForm, repository_url: e.target.value })}
+                  placeholder="https://github.com/username/repo"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="edit-repo-type">仓库类型</Label>
+                  <Select
+                    value={editForm.repository_type}
+                    onValueChange={(value: any) => setEditForm({ ...editForm, repository_type: value })}
+                  >
+                    <SelectTrigger id="edit-repo-type">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="github">GitHub</SelectItem>
+                      <SelectItem value="gitlab">GitLab</SelectItem>
+                      <SelectItem value="other">其他</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <Label htmlFor="edit-branch">默认分支</Label>
+                  <Input
+                    id="edit-branch"
+                    value={editForm.default_branch}
+                    onChange={(e) => setEditForm({ ...editForm, default_branch: e.target.value })}
+                    placeholder="main"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* 编程语言 */}
+            <div className="space-y-4">
+              <h3 className="text-sm font-semibold text-gray-900">编程语言</h3>
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                {supportedLanguages.map((lang) => (
+                  <div
+                    key={lang}
+                    className={`flex items-center space-x-2 p-3 rounded-lg border cursor-pointer transition-all ${
+                      editForm.programming_languages?.includes(lang)
+                        ? 'border-primary bg-red-50'
+                        : 'border-gray-200 hover:border-gray-300'
+                    }`}
+                    onClick={() => handleToggleLanguage(lang)}
+                  >
+                    <div
+                      className={`w-4 h-4 rounded border flex items-center justify-center ${
+                        editForm.programming_languages?.includes(lang)
+                          ? 'bg-primary border-primary'
+                          : 'border-gray-300'
+                      }`}
+                    >
+                      {editForm.programming_languages?.includes(lang) && (
+                        <CheckCircle className="w-3 h-3 text-white" />
+                      )}
+                    </div>
+                    <span className="text-sm font-medium">{lang}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end space-x-3 pt-4 border-t">
+            <Button variant="outline" onClick={() => setShowEditDialog(false)}>
+              取消
+            </Button>
+            <Button onClick={handleSaveEdit}>
+              保存修改
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 删除确认对话框 */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>移到回收站</AlertDialogTitle>
+            <AlertDialogDescription>
+              您确定要删除项目 <span className="font-semibold text-gray-900">"{projectToDelete?.name}"</span> 吗？
+              <br />
+              <br />
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 my-3">
+                <p className="text-blue-800 font-semibold mb-2">💡 温馨提示</p>
+                <ul className="list-disc list-inside text-blue-700 space-y-1 text-sm">
+                  <li>项目将被移到<span className="font-semibold">回收站</span>，不会立即删除</li>
+                  <li>您可以在回收站中随时恢复此项目</li>
+                  <li>相关的审计任务和报告将会保留</li>
+                  <li>如需永久删除，请在回收站中操作</li>
+                </ul>
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmDelete}
+              className="bg-orange-600 hover:bg-orange-700 focus:ring-orange-600"
+            >
+              移到回收站
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/pages/RecycleBin.tsx b/src/pages/RecycleBin.tsx
new file mode 100644
index 0000000..53a474f
--- /dev/null
+++ b/src/pages/RecycleBin.tsx
@@ -0,0 +1,322 @@
+import { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import {
+  Search,
+  GitBranch,
+  Calendar,
+  Users,
+  ExternalLink,
+  Trash2,
+  RotateCcw,
+  AlertTriangle,
+  Inbox
+} from "lucide-react";
+import { api } from "@/shared/config/database";
+import type { Project } from "@/shared/types";
+import { toast } from "sonner";
+
+export default function RecycleBin() {
+  const [deletedProjects, setDeletedProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [showRestoreDialog, setShowRestoreDialog] = useState(false);
+  const [showPermanentDeleteDialog, setShowPermanentDeleteDialog] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
+
+  useEffect(() => {
+    loadDeletedProjects();
+  }, []);
+
+  const loadDeletedProjects = async () => {
+    try {
+      setLoading(true);
+      const data = await api.getDeletedProjects();
+      setDeletedProjects(data);
+    } catch (error) {
+      console.error('Failed to load deleted projects:', error);
+      toast.error("加载已删除项目失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRestoreClick = (project: Project) => {
+    setSelectedProject(project);
+    setShowRestoreDialog(true);
+  };
+
+  const handlePermanentDeleteClick = (project: Project) => {
+    setSelectedProject(project);
+    setShowPermanentDeleteDialog(true);
+  };
+
+  const handleConfirmRestore = async () => {
+    if (!selectedProject) return;
+
+    try {
+      await api.restoreProject(selectedProject.id);
+      toast.success(`项目 "${selectedProject.name}" 已恢复`);
+      setShowRestoreDialog(false);
+      setSelectedProject(null);
+      loadDeletedProjects();
+    } catch (error) {
+      console.error('Failed to restore project:', error);
+      toast.error("恢复项目失败");
+    }
+  };
+
+  const handleConfirmPermanentDelete = async () => {
+    if (!selectedProject) return;
+
+    try {
+      await api.permanentlyDeleteProject(selectedProject.id);
+      toast.success(`项目 "${selectedProject.name}" 已永久删除`);
+      setShowPermanentDeleteDialog(false);
+      setSelectedProject(null);
+      loadDeletedProjects();
+    } catch (error) {
+      console.error('Failed to permanently delete project:', error);
+      toast.error("永久删除项目失败");
+    }
+  };
+
+  const filteredProjects = deletedProjects.filter(project =>
+    project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    project.description?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const getRepositoryIcon = (type?: string) => {
+    switch (type) {
+      case 'github': return '🐙';
+      case 'gitlab': return '🦊';
+      default: return '📁';
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('zh-CN');
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-gray-500">加载中...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 animate-fade-in">
+      {/* 页面标题 */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="page-title flex items-center gap-2">
+            <Trash2 className="w-8 h-8 text-gray-400" />
+            回收站
+          </h1>
+          <p className="page-subtitle">管理已删除的项目，可以恢复或永久删除</p>
+        </div>
+      </div>
+
+      {/* 搜索 */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center space-x-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input
+                placeholder="搜索已删除的项目..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 项目列表 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredProjects.length > 0 ? (
+          filteredProjects.map((project) => (
+            <Card key={project.id} className="card-modern group opacity-75 hover:opacity-100 transition-opacity">
+              <CardHeader className="pb-4">
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center space-x-3">
+                    <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-gray-400 to-gray-500 flex items-center justify-center text-white text-lg">
+                      {getRepositoryIcon(project.repository_type)}
+                    </div>
+                    <div>
+                      <CardTitle className="text-lg">
+                        {project.name}
+                      </CardTitle>
+                      {project.description && (
+                        <p className="text-sm text-gray-500 mt-1 line-clamp-2">
+                          {project.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <Badge variant="secondary" className="flex-shrink-0 bg-red-100 text-red-700">
+                    已删除
+                  </Badge>
+                </div>
+              </CardHeader>
+
+              <CardContent className="space-y-4">
+                {/* 项目信息 */}
+                <div className="space-y-3">
+                  {project.repository_url && (
+                    <div className="flex items-center text-sm text-gray-500">
+                      <GitBranch className="w-4 h-4 mr-2 flex-shrink-0" />
+                      <a
+                        href={project.repository_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="hover:text-primary transition-colors flex items-center truncate"
+                      >
+                        <span className="truncate">{project.repository_url.replace('https://', '')}</span>
+                        <ExternalLink className="w-3 h-3 ml-1 flex-shrink-0" />
+                      </a>
+                    </div>
+                  )}
+
+                  <div className="flex items-center justify-between text-sm text-gray-500">
+                    <div className="flex items-center">
+                      <Calendar className="w-4 h-4 mr-2" />
+                      删除于 {formatDate(project.updated_at)}
+                    </div>
+                    <div className="flex items-center">
+                      <Users className="w-4 h-4 mr-2" />
+                      {project.owner?.full_name || '未知'}
+                    </div>
+                  </div>
+                </div>
+
+                {/* 编程语言 */}
+                {project.programming_languages && (
+                  <div className="flex flex-wrap gap-2">
+                    {JSON.parse(project.programming_languages).slice(0, 4).map((lang: string) => (
+                      <Badge key={lang} variant="outline" className="text-xs">
+                        {lang}
+                      </Badge>
+                    ))}
+                    {JSON.parse(project.programming_languages).length > 4 && (
+                      <Badge variant="outline" className="text-xs">
+                        +{JSON.parse(project.programming_languages).length - 4}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+
+                {/* 操作按钮 */}
+                <div className="flex gap-2 pt-2">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="flex-1 text-green-600 hover:text-green-700 hover:bg-green-50"
+                    onClick={() => handleRestoreClick(project)}
+                  >
+                    <RotateCcw className="w-4 h-4 mr-2" />
+                    恢复
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="flex-1 text-red-600 hover:text-red-700 hover:bg-red-50"
+                    onClick={() => handlePermanentDeleteClick(project)}
+                  >
+                    <Trash2 className="w-4 h-4 mr-2" />
+                    永久删除
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        ) : (
+          <div className="col-span-full">
+            <Card className="card-modern">
+              <CardContent className="empty-state py-16">
+                <div className="empty-icon">
+                  <Inbox className="w-8 h-8 text-primary" />
+                </div>
+                <h3 className="text-lg font-medium text-gray-900 mb-2">
+                  {searchTerm ? '未找到匹配的项目' : '回收站为空'}
+                </h3>
+                <p className="text-gray-500 mb-6 max-w-md">
+                  {searchTerm ? '尝试调整搜索条件' : '回收站中没有已删除的项目'}
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </div>
+
+      {/* 恢复项目确认对话框 */}
+      <AlertDialog open={showRestoreDialog} onOpenChange={setShowRestoreDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认恢复项目</AlertDialogTitle>
+            <AlertDialogDescription>
+              您确定要恢复项目 <span className="font-semibold text-gray-900">"{selectedProject?.name}"</span> 吗？
+              <br />
+              <br />
+              恢复后，该项目将重新出现在项目列表中，您可以继续使用该项目的所有功能。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmRestore}
+              className="bg-green-600 hover:bg-green-700 focus:ring-green-600"
+            >
+              确认恢复
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* 永久删除确认对话框 */}
+      <AlertDialog open={showPermanentDeleteDialog} onOpenChange={setShowPermanentDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2 text-red-600">
+              <AlertTriangle className="w-5 h-5" />
+              警告：永久删除项目
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              您确定要<span className="font-semibold text-red-600">永久删除</span>项目 <span className="font-semibold text-gray-900">"{selectedProject?.name}"</span> 吗？
+              <br />
+              <br />
+              <div className="bg-red-50 border border-red-200 rounded-lg p-4 my-3">
+                <p className="text-red-800 font-semibold mb-2">⚠️ 此操作不可撤销！</p>
+                <ul className="list-disc list-inside text-red-700 space-y-1 text-sm">
+                  <li>项目数据将被永久删除</li>
+                  <li>相关的审计任务可能会受影响</li>
+                  <li>无法通过任何方式恢复</li>
+                </ul>
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmPermanentDelete}
+              className="bg-red-600 hover:bg-red-700 focus:ring-red-600"
+            >
+              确认永久删除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
diff --git a/src/shared/config/database.ts b/src/shared/config/database.ts
index d10c3da..473a3ea 100644
--- a/src/shared/config/database.ts
+++ b/src/shared/config/database.ts
@@ -287,6 +287,60 @@ export const api = {
     if (error) throw error;
   },
 
+  async getDeletedProjects(): Promise<Project[]> {
+    if (isDemoMode) {
+      return [];
+    }
+    
+    if (isLocalMode) {
+      return localDB.getDeletedProjects();
+    }
+    
+    if (!supabase) return [];
+    
+    const { data, error } = await supabase
+      .from('projects')
+      .select(`
+        *,
+        owner:profiles!projects_owner_id_fkey(*)
+      `)
+      .eq('is_active', false)
+      .order('updated_at', { ascending: false });
+    
+    if (error) throw error;
+    return Array.isArray(data) ? data : [];
+  },
+
+  async restoreProject(id: string): Promise<void> {
+    if (isLocalMode) {
+      return localDB.restoreProject(id);
+    }
+    
+    if (!supabase) throw new Error('Database not available');
+    
+    const { error } = await supabase
+      .from('projects')
+      .update({ is_active: true, updated_at: new Date().toISOString() })
+      .eq('id', id);
+    
+    if (error) throw error;
+  },
+
+  async permanentlyDeleteProject(id: string): Promise<void> {
+    if (isLocalMode) {
+      return localDB.permanentlyDeleteProject(id);
+    }
+    
+    if (!supabase) throw new Error('Database not available');
+    
+    const { error } = await supabase
+      .from('projects')
+      .delete()
+      .eq('id', id);
+    
+    if (error) throw error;
+  },
+
   // ProjectMember相关
   async getProjectMembers(projectId: string): Promise<ProjectMember[]> {
     if (isLocalMode) {
diff --git a/src/shared/config/localDatabase.ts b/src/shared/config/localDatabase.ts
index 9ce62ca..414376f 100644
--- a/src/shared/config/localDatabase.ts
+++ b/src/shared/config/localDatabase.ts
@@ -327,6 +327,43 @@ class LocalDatabase {
     await this.put(STORES.PROJECTS, updated);
   }
 
+  async getDeletedProjects(): Promise<Project[]> {
+    const projects = await this.getAll<Project>(STORES.PROJECTS);
+    const deletedProjects = projects.filter(p => !p.is_active);
+    
+    // 关联 owner 信息
+    const projectsWithOwner = await Promise.all(
+      deletedProjects.map(async (project) => {
+        const owner = project.owner_id ? await this.getProfileById(project.owner_id) : null;
+        return { ...project, owner: owner || undefined };
+      })
+    );
+    
+    return projectsWithOwner.sort((a, b) => 
+      new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+    );
+  }
+
+  async restoreProject(id: string): Promise<void> {
+    const existing = await this.getById<Project>(STORES.PROJECTS, id);
+    if (!existing) throw new Error('Project not found');
+    
+    const updated: Project = {
+      ...existing,
+      is_active: true,
+      updated_at: new Date().toISOString(),
+    };
+    
+    await this.put(STORES.PROJECTS, updated);
+  }
+
+  async permanentlyDeleteProject(id: string): Promise<void> {
+    const existing = await this.getById<Project>(STORES.PROJECTS, id);
+    if (!existing) throw new Error('Project not found');
+    
+    await this.deleteRecord(STORES.PROJECTS, id);
+  }
+
   // ==================== ProjectMember 相关方法 ====================
 
   async getProjectMembers(projectId: string): Promise<ProjectMember[]> {