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

Compare commits

base: kubbo:20e488c5456191d8b693dd3b65106dba185bbecb
Branches Tags
kubbo:main
...
compare: kubbo:main
Branches Tags
kubbo:main

2 Commits
20e488c545 ... main

Author SHA1 Message Date
kubbo
dc5df832ab feat(layout): 重构布局并添加新功能 
- 重新调整了全局样式，增加了重置样式和容器样式优化
- 设计并实现了新的悬浮迷你菜单
- 更新了主内容区的样式，使其扩展到全视窗
- 在首页添加了背景切换功能和新的标题样式
- 优化了操作指南的布局和样式
 2025-07-15 23:25:55 +08:00
kubbo
95ca754f96 feat: 初步实现 Flowgram 面板布局和功能 
- 添加了左侧悬浮菜单栏和主内容区的布局结构
- 实现了流程图编辑区域和可交互节点的样式
- 添加了操作指南提示信息
- 在全局样式中增加了悬浮菜单栏、工具按钮和流程图节点的交互效果
 2025-07-15 21:00:42 +08:00
4 changed files with 190 additions and 105 deletions
Expand all files Collapse all files

53
src/app/globals.css
View File

@@ -112,6 +112,40 @@
--sidebar-ring: oklch(0.551 0.027 264.364); --sidebar-ring: oklch(0.551 0.027 264.364);
} }
/* 全局样式重置 */
html, body {
margin: 0;
padding: 0;
height: 100%;
}
/* 容器样式优化 */
.container {
width: 100%;
max-width: none;
padding: 0;
margin: 0;
}
/* 滚动条样式优化 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #e5e7eb;
border-radius: 4px;
}
/* 动画过渡效果 */
.transition-all {
transition: all 0.2s ease;
}
@layer base { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border outline-ring/50;
@@ -120,3 +154,22 @@
@apply bg-background text-foreground; @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;
}

31
src/app/layout.tsx
View File

@@ -1,6 +1,9 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import '@/app/globals.css'
// 新增样式导入
import sidebarStyles from '@/app/sidebar.module.css'
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@@ -12,11 +15,6 @@ const geistMono = Geist_Mono({
subsets: ["latin"], subsets: ["latin"],
}); });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
@@ -27,7 +25,28 @@ export default function RootLayout({
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >
<div className="flex min-h-screen">
{/* 悬浮迷你菜单 */}
<div className={sidebarStyles.miniSidebar}>
{/* 图标按钮示例 */}
<div className={sidebarStyles.miniSidebarItem} title="仪表盘">
<span className="text-xl font-bold">🏠</span>
<span className={sidebarStyles.tooltip}>仪表盘</span>
</div>
<div className={sidebarStyles.miniSidebarItem} title="项目管理">
<span className="text-xl font-bold">📁</span>
<span className={sidebarStyles.tooltip}>项目管理</span>
</div>
<div className={sidebarStyles.miniSidebarItem} title="设置">
<span className="text-xl font-bold">⚙️</span>
<span className={sidebarStyles.tooltip}>设置</span>
</div>
</div>
{/* 主内容区 - 扩展到全视窗 */}
<div className="flex-1 ml-0 mr-0 mt-0 mb-0">
{children} {children}
</div>
</div>
</body> </body>
</html> </html>
); );

148
src/app/page.tsx
View File

@@ -1,103 +1,59 @@
import Image from "next/image"; "use client";
import { useState } from 'react';
export default function Home() { export default function Home() {
return ( const [bgStyle, setBgStyle] = useState('grid');
<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"> return (
<a <div className="relative w-full h-screen overflow-hidden">
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" <div className={`absolute inset-0 z-0 transition-all duration-300 ${
target="_blank" bgStyle === 'grid' ? 'bg-gray-100 dark:bg-gray-800 [background-size:40px_40px] [background-image:linear-gradient(to-right,rgba(0,0,0,0.1)_4px,transparent_4px),linear-gradient(to-bottom,rgba(0,0,0,0.1)_1px,transparent_1px)]' :
rel="noopener noreferrer" bgStyle === 'dot' ? 'bg-gray-100 dark:bg-gray-800 [background-size:20px_20px] [background-image:radial-gradient(circle,rgba(0,0,0,0.1)_2px,transparent_2px)]' :
> 'bg-white dark:bg-gray-900'
<Image }`}></div>
className="dark:invert"
src="/vercel.svg" {/* 标题 */}
alt="Vercel logomark" <h1 className="absolute top-4 left-4 z-10 text-3xl font-bold bg-white/80 dark:bg-gray-800/80 px-3 py-1 rounded-md shadow-sm">
width={20} FrpFlow面板
height={20} </h1>
/>
Deploy now {/* 流程图容器 */}
</a> <div className="absolute inset-0 z-10 flex items-center justify-center">
<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]" <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">
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" <h3 className="font-semibold">输入节点</h3>
target="_blank" <p className="text-sm text-gray-600 dark:text-gray-300">初始数据入口</p>
rel="noopener noreferrer" </div>
>
Read our docs <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">
</a> <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="fixed bottom-4 right-4 p-4 bg-white/0 dark:bg-gray-800/80 rounded-lg shadow-lg backdrop-blur-md border border-gray-200 dark:border-gray-700 z-50">
<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 className="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 flex justify-around">
<button onClick={() => setBgStyle('grid')} className={`px-3 py-1 rounded ${bgStyle === 'grid' ? 'bg-blue-500 text-white' : 'bg-gray-200 dark:bg-gray-700'}`}>网格</button>
<button onClick={() => setBgStyle('dot')} className={`px-3 py-1 rounded ${bgStyle === 'dot' ? 'bg-blue-500 text-white' : 'bg-gray-200 dark:bg-gray-700'}`}>网点</button>
<button onClick={() => setBgStyle('none')} className={`px-3 py-1 rounded ${bgStyle === 'none' ? 'bg-blue-500 text-white' : 'bg-gray-200 dark:bg-gray-700'}`}>无背景</button>
</div>
</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> </div>
); );
} }

57
src/app/sidebar.module.css Normal file
View File

@@ -0,0 +1,57 @@
.miniSidebar {
position: fixed;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 4rem;
height: max-content;
max-height: 80vh;
background-color: rgba(249, 250, 251, 0.95);
border-radius: 1rem;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
z-index: 50;
}
.miniSidebarItem {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
margin: 0.5rem 0;
transition: all 0.2s ease;
position: relative;
cursor: pointer;
}
.miniSidebarItem:hover {
background-color: rgba(209, 213, 219, 0.5);
}
.tooltip {
position: absolute;
left: 4rem;
top: 50%;
transform: translateY(-50%);
background-color: #1f2937;
color: #f9fafb;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
font-size: 0.875rem;
}
.miniSidebarItem:hover .tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
}