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 面板

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

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

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

输入节点

+

初始数据入口

+
+ +
+

处理节点

+

数据处理逻辑

+
+ +
+

输出节点

+

最终结果出口

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

操作指南

+ +
); }