React Grid Layout Demo

基于 React Grid Layout + Untitled UI 的固定宽度网格布局仪表板演示

✨ 功能特点

• 🎯 拖拽式网格布局 - 支持拖拽调整位置和大小
• 🖥️ 固定宽度设计 - 针对 1280-1680px 宽度优化
• 🧭 多模式导航系统 - 水平导航、悬停菜单、侧边栏三种模式
• 📏 实时窗口尺寸显示 - 浏览器标签页显示当前窗口尺寸
• 🎛️ 布局控制面板 - 快速切换导航模式和重置布局
• 💾 布局持久化 - 自动保存用户布局配置
• ⚡ 单一布局方案 - 专注桌面端固定布局体验
• ♿ 完全可访问 - 基于 React Aria 无障碍标准
• 🎨 现代 UI - Untitled UI + Tailwind CSS v4

🚀 技术栈

• React 19.1 + TypeScript 5.8
• Vite 7.1.2 - 极速构建工具
• Tailwind CSS v4 - CSS-first 配置
• React Grid Layout - 网格布局核心
• Untitled UI React - 开源组件库
• React Aria - 无障碍组件基础

🚀 快速开始

# 安装 pnpm（如未安装）
npm install -g pnpm

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

📋 主要功能

🧭 导航系统

• 水平导航模式 (Horizontal) - 传统的顶部导航栏布局
• 悬停菜单模式 (Hover) - 鼠标悬停展开的下拉菜单，包含面包屑导航
• 侧边栏模式 (Sidebar) - 侧边导航栏布局，支持展开/收起
• 统一导航回调 - 类型安全的导航状态管理系统
• 面包屑导航 - 多级路径显示和快速切换功能

🎛️ 仪表板组件

• 指标卡片 - 客户、任务、资产、计划数据展示
• 数据列表 - 任务、事件、计划列表管理
• 活动面板 - 用户操作历史记录
• 固定布局 - 针对桌面端优化的布局体验

📐 布局操作

• 拖拽调整 - 鼠标拖拽改变组件位置
• 尺寸调整 - 拖拽右下角改变组件大小
• 固定宽度 - 专为 1280-1680px 宽度优化
• 配置持久化 - 布局设置自动保存
• 布局控制面板 - 实时切换导航模式和重置布局
• 窗口尺寸监控 - 浏览器标签实时显示窗口尺寸

📖 项目文档

本项目提供完整的技术文档库，包含所有依赖库的详细文档：

📚 查看完整文档

文档内容

• 核心库文档 - React Grid Layout、Vite、TypeScript 等
• UI 组件库 - React Aria、Untitled UI 使用指南
• 工具库文档 - Tailwind CSS、CVA 最佳实践
• 集成指南 - 组件间协作和优化建议

🌐 在线演示

访问地址: https://ipoly.github.io/react-grid-layout-demo/

体验功能

• 拖拽调整组件位置和大小
• 三种导航模式自由切换（水平、悬停、侧边栏）
• 实时查看窗口尺寸变化
• 布局控制面板快速操作
• 固定宽度布局优化体验
• 桌面端专属交互设计

---

维护者: ipoly | 许可证: MIT