kubbo/frp-flow
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

feat: 初步实现 Flowgram 面板布局和功能

Browse Source 
- 添加了左侧悬浮菜单栏和主内容区的布局结构
- 实现了流程图编辑区域和可交互节点的样式
- 添加了操作指南提示信息
- 在全局样式中增加了悬浮菜单栏、工具按钮和流程图节点的交互效果
This commit is contained in:
kubbo
2025-07-15 21:00:42 +08:00
parent 20e488c545
commit 95ca754f96
3 changed files with 72 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/globals.css
View File

@@ -120,3 +120,22 @@
@apply bg-background text-foreground;
}
}
/* 悬浮菜单栏动画效果 */
.fixed {
transition: transform 0.2s ease-in-out;
}
/* 工具面板悬停效果 */
.sidebar-button:hover {
background-color: rgba(0, 0, 0, 0.05);
}
/* 流程图节点交互效果 */
.node-container {
cursor: grab;
}
.node-container:active {
cursor: grabbing;
}

18
src/app/layout.tsx
View File

@@ -27,8 +27,22 @@ export default function RootLayout({
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<div className="flex min-h-screen">
{/* 左侧悬浮菜单栏 */}
<div className="fixed left-0 top-0 h-full w-64 bg-gray-100 dark:bg-gray-800 p-4 shadow-lg">
<h2 className="text-xl font-bold mb-4">工具面板</h2>
<ul className="space-y-2">
<li><button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">仪表盘</button></li>
<li><button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">项目管理</button></li>
<li><button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">设置</button></li>
</ul>
</div>
{/* 主内容区 */}
<div className="flex-1 ml-64">
{children}
</div>
</div>
</body>
</html>
);
}
}

132
src/app/page.tsx
View File

@@ -2,102 +2,44 @@ import Image from "next/image";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
src/app/page.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
<div className="p-8">
<h1 className="text-3xl font-bold mb-8">Flowgram 面板</h1>
{/* 流程图容器 */}
<div className="relative w-full h-[600px] bg-white dark:bg-gray-900 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
<div className="absolute inset-0 flex items-center justify-center">
<div className="text-center">
<p className="text-gray-500 dark:text-gray-400">流程图编辑区域 - 可拖拽节点将出现在这里</p>
</div>
</div>
</main>
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
{/* 节点示例（可交互） */}
<div className="absolute top-1/4 left-1/4 w-32 p-3 bg-blue-100 dark:bg-blue-900 rounded shadow hover:shadow-md transition-shadow">
<h3 className="font-semibold">输入节点</h3>
<p className="text-sm text-gray-600 dark:text-gray-300">初始数据入口</p>
</div>
<div className="absolute top-1/2 left-1/2 w-32 p-3 bg-green-100 dark:bg-green-900 rounded shadow hover:shadow-md transition-shadow">
<h3 className="font-semibold">处理节点</h3>
<p className="text-sm text-gray-600 dark:text-gray-300">数据处理逻辑</p>
</div>
<div className="absolute top-3/4 left-3/4 w-32 p-3 bg-purple-100 dark:bg-purple-900 rounded shadow hover:shadow-md transition-shadow">
<h3 className="font-semibold">输出节点</h3>
<p className="text-sm text-gray-600 dark:text-gray-300">最终结果出口</p>
</div>
</div>
{/* 操作提示 */}
<div className="mt-8 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<h2 className="text-xl font-semibold mb-2">操作指南</h2>
<ul className="list-disc pl-5 space-y-1 text-gray-600 dark:text-gray-300">
<li>从左侧工具栏拖拽节点到流程图区域</li>
<li>点击节点查看详细配置面板</li>
<li>使用右键菜单创建连接线</li>
<li>顶部工具栏提供保存、导出和调试功能</li>
</ul>
</div>
</div>
);
}