From 95ca754f966835e1013905932cd9c4244890f405 Mon Sep 17 00:00:00 2001 From: kubbo <390378816@qq.com> Date: Tue, 15 Jul 2025 21:00:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E6=AD=A5=E5=AE=9E=E7=8E=B0=20?= =?UTF-8?q?Flowgram=20=E9=9D=A2=E6=9D=BF=E5=B8=83=E5=B1=80=E5=92=8C?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加了左侧悬浮菜单栏和主内容区的布局结构 - 实现了流程图编辑区域和可交互节点的样式 - 添加了操作指南提示信息 - 在全局样式中增加了悬浮菜单栏、工具按钮和流程图节点的交互效果 --- src/app/globals.css | 19 +++++++ src/app/layout.tsx | 18 +++++- src/app/page.tsx | 132 +++++++++++++------------------------------- 3 files changed, 72 insertions(+), 97 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 9711daf..ed5cc99 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..ee8f954 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -27,8 +27,22 @@ export default function RootLayout({ - {children} +
+ {/* 左侧悬浮菜单栏 */} +
+

工具面板

+ +
+ {/* 主内容区 */} +
+ {children} +
+
); -} +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index e68abe6..7a9a5b2 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,102 +2,44 @@ import Image from "next/image"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - +
+

Flowgram 面板

+ + {/* 流程图容器 */} +
+
+
+

流程图编辑区域 - 可拖拽节点将出现在这里

+
-
- + + {/* 节点示例（可交互） */} +
+

输入节点

+

初始数据入口

+
+ +
+

处理节点

+

数据处理逻辑

+
+ +
+

输出节点

+

最终结果出口

+
+
+ + {/* 操作提示 */} +
+

操作指南

+ +
); }