Skip to content

Commit 7357ab7

Browse files
MiaoMintMiaoMint
committed
feat: refactor App component, add AppSidebar, and update CanvasView layout
1 parent b933758 commit 7357ab7

File tree

5 files changed

+95
-83
lines changed

5 files changed

+95
-83
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
build/bin
22
node_modules
33
frontend/dist
4+
.DS_Store

‎frontend/src/App.tsx‎

Lines changed: 5 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
1-
import {
2-
Sidebar,
3-
SidebarContent,
4-
SidebarFooter,
5-
SidebarGroup,
6-
SidebarGroupContent,
7-
SidebarGroupLabel,
8-
SidebarHeader,
9-
SidebarMenu,
10-
SidebarMenuButton,
11-
SidebarMenuItem,
12-
SidebarProvider,
13-
SidebarInset,
14-
} from "@/components/ui/sidebar";
1+
import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";
152
import { ProjectList } from "@/components/project-list";
163
import { CanvasView } from "@/components/canvas-view";
17-
import { NavUser } from "@/components/nav-user";
18-
import { Home, Settings } from "lucide-react";
4+
import { AppSidebar } from "@/components/app-sidebar";
195
import { useState } from "react";
206

217
interface Project {
@@ -48,50 +34,14 @@ export default function App() {
4834
}
4935

5036
return (
51-
<div className="relative">
37+
<div className="relative bg-sidebar">
5238
<div
5339
className="fixed top-0 left-0 h-15 w-full z-50"
5440
style={{ "--wails-draggable": "drag" } as React.CSSProperties}
5541
></div>
5642
<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>
43+
<AppSidebar />
44+
<SidebarInset className="m-2 rounded-2xl shadow z-10 border border-border/10">
9545
<ProjectList onProjectClick={handleProjectClick} />
9646
</SidebarInset>
9747
</SidebarProvider>

‎frontend/src/components/app-sidebar.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {
2+
Sidebar,
3+
SidebarContent,
4+
SidebarFooter,
5+
SidebarGroup,
6+
SidebarGroupContent,
7+
SidebarGroupLabel,
8+
SidebarHeader,
9+
SidebarMenu,
10+
SidebarMenuButton,
11+
SidebarMenuItem,
12+
} from "@/components/ui/sidebar";
13+
import { NavUser } from "@/components/nav-user";
14+
import { Home, Image, Settings } from "lucide-react";
15+
16+
export function AppSidebar() {
17+
return (
18+
<Sidebar className="border-none">
19+
<SidebarHeader>
20+
<div className="px-2 mt-10">
21+
<h2 className="text-xl font-bold">Firebringer</h2>
22+
</div>
23+
</SidebarHeader>
24+
<SidebarContent>
25+
<SidebarGroup>
26+
<SidebarGroupContent>
27+
<SidebarMenu>
28+
<SidebarMenuItem>
29+
<SidebarMenuButton isActive>
30+
<Home />
31+
<span>项目</span>
32+
</SidebarMenuButton>
33+
</SidebarMenuItem>
34+
<SidebarMenuItem>
35+
<SidebarMenuButton>
36+
<Image />
37+
<span>素材库</span>
38+
</SidebarMenuButton>
39+
</SidebarMenuItem>
40+
<SidebarMenuItem>
41+
<SidebarMenuButton>
42+
<Settings />
43+
<span>设置</span>
44+
</SidebarMenuButton>
45+
</SidebarMenuItem>
46+
</SidebarMenu>
47+
</SidebarGroupContent>
48+
</SidebarGroup>
49+
</SidebarContent>
50+
<SidebarFooter>
51+
<NavUser
52+
user={{
53+
name: "用户名",
54+
email: "[email protected]",
55+
avatar: "https://placehold.co/100x100/6366f1/ffffff?text=U",
56+
}}
57+
/>
58+
</SidebarFooter>
59+
</Sidebar>
60+
);
61+
}

‎frontend/src/components/canvas-view.tsx‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -61,36 +61,36 @@ export function CanvasView({
6161
);
6262

6363
return (
64-
<div className="flex h-full flex-col relative">
65-
{/* 顶部工具栏 */}
66-
<div
67-
className="flex items-center gap-4 border-b p-2 bg-background pl-24"
68-
style={{ "--wails-draggable": "drag" } as React.CSSProperties}
69-
>
70-
<Button variant="ghost" size="icon" onClick={onBack}>
71-
<ArrowLeft className="h-5 w-5" />
72-
</Button>
73-
<Input
74-
value={name}
75-
onChange={(e) => setName(e.target.value)}
76-
className="max-w-md"
77-
placeholder="项目名称"
78-
/>
79-
<div className="ml-auto">
80-
<Button
81-
variant="ghost"
82-
size="icon"
83-
onClick={() => setIsChatOpen(!isChatOpen)}
84-
>
85-
<MessageSquare className="h-5 w-5" />
64+
<div className="flex h-full relative">
65+
{/* 主要内容区域 - 全屏 */}
66+
<div className="flex flex-1 relative overflow-hidden w-full h-full">
67+
{/* 顶部工具栏 - 悬浮毛玻璃效果 */}
68+
<div
69+
className="absolute top-0 left-0 right-0 z-20 flex items-center gap-4 p-2 pl-24 backdrop-blur-md bg-background/80 border-b border-border/50"
70+
style={{ "--wails-draggable": "drag" } as React.CSSProperties}
71+
>
72+
<Button variant="ghost" size="icon" onClick={onBack}>
73+
<ArrowLeft className="h-5 w-5" />
8674
</Button>
75+
<Input
76+
value={name}
77+
onChange={(e) => setName(e.target.value)}
78+
className="max-w-sm border-none bg-transparent px-2 focus-visible:ring-0 focus-visible:ring-offset-0 font-semibold"
79+
placeholder="项目名称"
80+
/>
81+
<div className="ml-auto">
82+
<Button
83+
variant="ghost"
84+
size="icon"
85+
onClick={() => setIsChatOpen(!isChatOpen)}
86+
>
87+
<MessageSquare className="h-5 w-5" />
88+
</Button>
89+
</div>
8790
</div>
88-
</div>
8991

90-
{/* 主要内容区域 */}
91-
<div className="flex flex-1 relative overflow-hidden">
9292
{/* 左侧悬浮工具栏 */}
93-
<div className="absolute left-4 top-4 z-10 flex flex-col gap-2">
93+
<div className="absolute left-4 top-20 z-10 flex flex-col gap-2">
9494
<Card className="p-2 shadow-lg">
9595
<div className="flex flex-col gap-2">
9696
<Button variant="ghost" size="icon" title="添加节点">
@@ -124,7 +124,7 @@ export function CanvasView({
124124

125125
{/* 右侧 Chat 面板 */}
126126
{isChatOpen && (
127-
<div className="w-96 bg-background border-l flex flex-col">
127+
<div className="w-96 bg-background border-l flex flex-col pt-14">
128128
<div className="flex items-center justify-between border-b p-4">
129129
<h3 className="font-semibold">AI 助手</h3>
130130
<Button

‎main.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ func main() {
1919
// Create application with options
2020
err := wails.Run(&options.App{
2121
Title: "firebringer",
22-
Width: 1024,
22+
Width: 1280,
2323
Height: 768,
2424
MinWidth: 800,
2525
MinHeight: 600,

0 commit comments

Comments
 (0)