Spireflow：开源免费的NextJS仪表盘模板，赋能数据可视化与管理

Spireflow是一个开源且免费的仪表盘模板，它基于先进的技术栈构建，旨在帮助开发者快速搭建功能强大、界面美观的数据可视化和管理平台。该项目采用NextJS和TypeScript编写，并与NodeJS后端以及PostgreSQL数据库相连接，提供了一个完整的解决方案，适用于各种需要数据分析和管理的场景，例如电商平台的运营监控。

**核心特性与功能：**

* **强大的数据图表：** Spireflow集成了14个数据图表，利用Recharts和Tremor.so等库，能够以多种方式呈现数据，帮助用户直观地了解业务状况。
* **灵活的数据表格：** 基于Tanstack-ReactTable v8，Spireflow提供具有过滤、排序、搜索、分页和CSV导出功能的表格，方便用户高效地管理和分析数据。
* **完善的身份验证：** 通过Clerk、React Hook Forms和Yup，Spireflow实现了用户身份验证功能，保障数据的安全性。
* **交互式日历：** 集成Fullcalendar.io，提供日历功能，允许用户移动、添加和删除事件，方便日程管理。
* **产品画廊：** 提供产品画廊，支持Lightbox弹出窗口和PDF导出，方便产品展示和管理。
* **世界地图：** 使用react-simple-maps，提供带有工具提示的世界地图，用于展示地理数据。
* **国际化支持：** 支持英语和波兰语，方便不同地区的用户使用。
* **CI/CD 流程：** 配备用于测试和代码检查的 CI 流程，并使用 Github Actions，保证代码质量。
* **代码规范：** 使用Prettier进行代码格式化，使用Eslint进行代码检查，并使用Git Hooks保证代码风格一致。
* **主题定制：** 提供4种主题，用户可以通过next-themes和tw-colors进行定制，满足个性化需求。

**技术栈：**

* React 19
* NextJS 15
* TypeScript
* Tailwind
* Zustand
* Apollo Client
* Recharts, Tremor.so
* Clerk
* Jest
* Fullcalendar.io
* yet-another-react-lightbox, @react-pdf/renderer
* react-simple-maps
* next-intl
* Prettier, Eslint, Husky

**项目结构：**

Spireflow的项目结构清晰，模块化程度高，方便开发者理解和修改。主要目录包括：

* `src/app`: NextJS页面（App Router）
* `src/assets`: 静态资源，包括图标和图像
* `src/components`: 主要组件，包括身份验证、通用、表单和页面特定组件
* `src/hooks`: 自定义的可重用钩子
* `src/i18n`: 国际化配置
* `src/layout`: 布局组件，包括导航栏和侧边栏
* `src/queries`: GraphQL查询
* `src/services`: 服务工具
* `src/store`: Zustand状态管理
* `src/styles`: 主题和全局样式
* `src/tests`: 测试文件
* `src/utils`: 实用函数
* `middleware.ts`: NextJS中间件

**快速上手：**

1. 克隆代码仓库：`git clone https://github.com/matt765/spireflow.git`
2. 进入项目目录：`cd spireflow`
3. 安装依赖：`npm install`
4. 配置环境变量：根据`.env.example`创建并配置`.env`文件，包括Clerk API密钥和GraphQL后端URL。
5. 启动开发服务器：`npm run dev`

**页面概览：**

* `/`: 首页，展示关键指标和组件。
* `/orders`: 订单管理页面，用于查看、跟踪和管理所有订单。
* `/customers`: 客户信息页面，用于浏览客户信息。
* `/analytics`: 分析页面，展示销售和业绩图表。
* `/calendar`: 日历页面，用于事件安排和日程管理。
* `/products`: 产品管理页面，提供产品画廊和导出选项。
* `/login`: 登录页面，用于用户登录。
* `/register`: 注册页面，用于用户注册。

**后端连接与身份验证：**

Spireflow可以连接到NodeJS后端，并使用Clerk进行身份验证。用户需要在Clerk.com上创建账户并获取API密钥，然后在`.env`文件中配置相关环境变量。为了演示目的，中间件中的路由保护和注册新账户的逻辑被注释掉了，在生产环境中使用时需要取消注释。

**无需后端与身份验证的快速启动：**

Spireflow可以在没有后端和身份验证的情况下运行。如果不需要后端连接，可以将`getData.ts`文件中的`switchToBackupData`值设置为`true`，数据将从`public/backendBackup.json`文件中获取。如果没有Clerk环境变量，应用程序仍然可以加载，但身份验证功能将无法使用。

**贡献与许可：**

欢迎社区成员贡献代码、报告问题和提供赞助。该项目采用MIT许可证，详情请参见许可证文件。

**SEO关键词：**

NextJS仪表盘, 开源仪表盘, 数据可视化模板

**相关标签：**

React, NextJS, TypeScript

Jeric-X/SyncClipboard: 跨平台剪贴板同步方案 / Cross-Platform Cipboard Syncing Solution
https://github.com/Jeric-X/SyncClipboard