Skip to content

Commit bc50b4c

Browse files
MiaoMintMiaoMint
committed
feat: add CanvasView and ProjectList components, integrate project selection in App
1 parent 17d3cf8 commit bc50b4c

File tree

6 files changed

+452
-65
lines changed

6 files changed

+452
-65
lines changed

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@base-ui/react": "^1.0.0",
1414
"@fontsource-variable/inter": "^5.2.8",
1515
"@tailwindcss/vite": "^4.1.17",
16+
"@xyflow/react": "^12.10.0",
1617
"class-variance-authority": "^0.7.1",
1718
"clsx": "^2.1.1",
1819
"lucide-react": "^0.562.0",

‎frontend/pnpm-lock.yaml‎

Lines changed: 175 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/App.tsx‎

Lines changed: 84 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,54 +11,90 @@ import {
1111
SidebarMenuItem,
1212
SidebarProvider,
1313
SidebarInset,
14-
} from "@/components/ui/sidebar"
15-
import { ProjectList } from "@/components/ProjectList"
16-
import { NavUser } from "@/components/nav-user"
17-
import { Home, Settings } from "lucide-react"
14+
} from "@/components/ui/sidebar";
15+
import { ProjectList } from "@/components/project-list";
16+
import { CanvasView } from "@/components/canvas-view";
17+
import { NavUser } from "@/components/nav-user";
18+
import { Home, Settings } from "lucide-react";
19+
import { useState } from "react";
20+
21+
interface Project {
22+
id: string;
23+
name: string;
24+
image: string;
25+
}
1826

1927
export default function App() {
28+
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
29+
30+
const handleProjectClick = (project: Project) => {
31+
setSelectedProject(project);
32+
};
33+
34+
const handleBackToProjects = () => {
35+
setSelectedProject(null);
36+
};
37+
38+
if (selectedProject) {
39+
return (
40+
<div className="h-screen">
41+
<CanvasView
42+
projectId={selectedProject.id}
43+
projectName={selectedProject.name}
44+
onBack={handleBackToProjects}
45+
/>
46+
</div>
47+
);
48+
}
49+
2050
return (
21-
<SidebarProvider>
22-
<Sidebar>
23-
<SidebarHeader>
24-
<div className="px-2 py-4">
25-
<h2 className="text-xl font-bold">Firebringer</h2>
26-
</div>
27-
</SidebarHeader>
28-
<SidebarContent>
29-
<SidebarGroup>
30-
<SidebarGroupLabel>菜单</SidebarGroupLabel>
31-
<SidebarGroupContent>
32-
<SidebarMenu>
33-
<SidebarMenuItem>
34-
<SidebarMenuButton isActive>
35-
<Home />
36-
<span>项目</span>
37-
</SidebarMenuButton>
38-
</SidebarMenuItem>
39-
<SidebarMenuItem>
40-
<SidebarMenuButton>
41-
<Settings />
42-
<span>设置</span>
43-
</SidebarMenuButton>
44-
</SidebarMenuItem>
45-
</SidebarMenu>
46-
</SidebarGroupContent>
47-
</SidebarGroup>
48-
</SidebarContent>
49-
<SidebarFooter>
50-
<NavUser
51-
user={{
52-
name: "用户名",
53-
email: "[email protected]",
54-
avatar: "https://placehold.co/100x100/6366f1/ffffff?text=U",
55-
}}
56-
/>
57-
</SidebarFooter>
58-
</Sidebar>
59-
<SidebarInset>
60-
<ProjectList />
61-
</SidebarInset>
62-
</SidebarProvider>
63-
)
64-
}
51+
<div className="relative">
52+
<div
53+
className="fixed top-0 left-0 h-15 w-full z-50"
54+
style={{ "--wails-draggable": "drag" } as React.CSSProperties}
55+
></div>
56+
<SidebarProvider>
57+
<Sidebar>
58+
<SidebarHeader>
59+
<div className="px-2 mt-8">
60+
<h2 className="text-xl font-bold">Firebringer</h2>
61+
</div>
62+
</SidebarHeader>
63+
<SidebarContent>
64+
<SidebarGroup>
65+
<SidebarGroupLabel>菜单</SidebarGroupLabel>
66+
<SidebarGroupContent>
67+
<SidebarMenu>
68+
<SidebarMenuItem>
69+
<SidebarMenuButton isActive>
70+
<Home />
71+
<span>项目</span>
72+
</SidebarMenuButton>
73+
</SidebarMenuItem>
74+
<SidebarMenuItem>
75+
<SidebarMenuButton>
76+
<Settings />
77+
<span>设置</span>
78+
</SidebarMenuButton>
79+
</SidebarMenuItem>
80+
</SidebarMenu>
81+
</SidebarGroupContent>
82+
</SidebarGroup>
83+
</SidebarContent>
84+
<SidebarFooter>
85+
<NavUser
86+
user={{
87+
name: "用户名",
88+
email: "[email protected]",
89+
avatar: "https://placehold.co/100x100/6366f1/ffffff?text=U",
90+
}}
91+
/>
92+
</SidebarFooter>
93+
</Sidebar>
94+
<SidebarInset>
95+
<ProjectList onProjectClick={handleProjectClick} />
96+
</SidebarInset>
97+
</SidebarProvider>
98+
</div>
99+
);
100+
}

0 commit comments

Comments
 (0)