feat(layout): 重构布局并添加新功能

- 重新调整了全局样式，增加了重置样式和容器样式优化 - 设计并实现了新的悬浮迷你菜单 - 更新了主内容区的样式，使其扩展到全视窗 - 在首页添加了背景切换功能和新的标题样式 - 优化了操作指南的布局和样式
feat: 初步实现 Flowgram 面板布局和功能
2025-07-15 23:25:55 +08:00 · 2025-07-15 21:00:42 +08:00
4 changed files with 190 additions and 105 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -112,6 +112,40 @@
  --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 {
  * {
    @apply border-border outline-ring/50;
@@ -120,3 +154,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;
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
 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({
  variable: "--font-geist-sans",
@@ -12,11 +15,6 @@ const geistMono = Geist_Mono({
  subsets: ["latin"],
 });

-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
 export default function RootLayout({
  children,
 }: Readonly<{
@@ -27,8 +25,29 @@ export default function RootLayout({
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
-        {children}
+        <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}
+          </div>
+        </div>
      </body>
    </html>
  );
-}
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,103 +1,59 @@
-import Image from "next/image";
+"use client";
+import { useState } from 'react';

 export default function Home() {
+  const [bgStyle, setBgStyle] = useState('grid');
+  
  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="relative w-full h-screen overflow-hidden">
+      {/* 画布背景样式 */}
+      <div className={`absolute inset-0 z-0 transition-all duration-300 ${
+        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)]' :
+        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'
+      }`}></div>
+      
+      {/* 标题 */}
+      <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">
+        FrpFlow面板
+      </h1>
+      
+      {/* 流程图容器 */}
+      <div className="absolute inset-0 z-10 flex items-center justify-center">
+        {/* 节点示例（可交互） */}
+        <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>
-      </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/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="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>
  );
-}
+}
--- a/src/app/sidebar.module.css
+++ b/src/app/sidebar.module.css
@@ -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;
+}