From dc5df832ab2fe315d199e202d585e230f246a994 Mon Sep 17 00:00:00 2001
From: kubbo <390378816@qq.com>
Date: Tue, 15 Jul 2025 23:25:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E9=87=8D=E6=9E=84=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=B9=B6=E6=B7=BB=E5=8A=A0=E6=96=B0=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        | 34 +++++++++++++++++++++++
 src/app/layout.tsx         | 37 ++++++++++++++-----------
 src/app/page.tsx           | 38 +++++++++++++++++--------
 src/app/sidebar.module.css | 57 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 138 insertions(+), 28 deletions(-)
 create mode 100644 src/app/sidebar.module.css

diff --git a/src/app/globals.css b/src/app/globals.css
index ed5cc99..d85e37d 100644
--- 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;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ee8f954..c8e3304 100644
--- 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<{
@@ -28,17 +26,24 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <div className="flex min-h-screen">
-          {/* 左侧悬浮菜单栏 */}
-          <div className="fixed left-0 top-0 h-full w-64 bg-gray-100 dark:bg-gray-800 p-4 shadow-lg">
-            <h2 className="text-xl font-bold mb-4">工具面板</h2>
-            <ul className="space-y-2">
-              <li><button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">仪表盘</button></li>
-              <li><button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">项目管理</button></li>
-              <li><button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">设置</button></li>
-            </ul>
+          {/* 悬浮迷你菜单 */}
+          <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-64">
+          {/* 主内容区 - 扩展到全视窗 */}
+          <div className="flex-1 ml-0 mr-0 mt-0 mb-0">
             {children}
           </div>
         </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7a9a5b2..f192539 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,18 +1,25 @@
-import Image from "next/image";
+"use client";
+import { useState } from 'react';
 
 export default function Home() {
+  const [bgStyle, setBgStyle] = useState('grid');
+  
   return (
-    <div className="p-8">
-      <h1 className="text-3xl font-bold mb-8">Flowgram 面板</h1>
+    <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="relative w-full h-[600px] bg-white dark:bg-gray-900 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="text-center">
-            <p className="text-gray-500 dark:text-gray-400">流程图编辑区域 - 可拖拽节点将出现在这里</p>
-          </div>
-        </div>
-        
+      <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>
@@ -31,7 +38,7 @@ export default function Home() {
       </div>
       
       {/* 操作提示 */}
-      <div className="mt-8 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+      <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>
@@ -39,7 +46,14 @@ export default function Home() {
           <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>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/sidebar.module.css b/src/app/sidebar.module.css
new file mode 100644
index 0000000..1baf06d
--- /dev/null
+++ 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;
+}
\ No newline at end of file