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

- 重新调整了全局样式，增加了重置样式和容器样式优化 - 设计并实现了新的悬浮迷你菜单 - 更新了主内容区的样式，使其扩展到全视窗 - 在首页添加了背景切换功能和新的标题样式 - 优化了操作指南的布局和样式
feat: 初步实现 Flowgram 面板布局和功能
2025-07-15 23:25:55 +08:00 · 2025-07-15 21:00:42 +08:00 · 2025-07-10 22:26:16 +08:00 · 2025-07-10 12:21:44 +08:00
8 changed files with 2174 additions and 130 deletions
--- a/components.json
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,16 +9,22 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@flowgram.ai/free-layout-editor": "^0.2.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.525.0",
+    "next": "15.3.5",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "next": "15.3.5"
+    "tailwind-merge": "^3.3.1"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4"
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "^5"
  }
 }
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,26 +1,175 @@
@import "tailwindcss";
+@import "tw-animate-css";

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --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;
+  }
+  body {
+    @apply bg-background text-foreground;
  }
 }

-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+/* 悬浮菜单栏动画效果 */
+.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;
+}
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
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
kubbo	20e488c545	build(dependencies): 更新项目依赖并添加新库 - 更新 clsx 版本至 2.1.1 - 添加 class-variance-authority、lucide-react、tailwind-merge 和 tw-animate-css 依赖 - 优化 globals.css 文件，引入新样式和暗黑模式支持	2025-07-10 22:26:16 +08:00
kubbo	2d0c585ddb	fix: 修改文件名大小写	2025-07-10 12:21:44 +08:00