Horizon 是一套面向数据分析、运营看板和内部业务系统的 Next.js 管理后台模板。下载包采用 Next.js 15.1.4、React 19 RC 与 Tailwind CSS 3.3.3，提供主仪表盘、NFT 市场、数据表、个人资料、登录和 RTL 后台六个功能路由，并附带根路径与后台根路径的两个重定向入口。它适合用作前端界面和组件开发起点，但不包含账户鉴权、数据库、业务接口或管理后端。
本地源码的 package.json 版本为 3.0.0，更新记录显示这一版已升级至 React 19 与 Next.js 15。项目共包含 104 个 TSX 文件，页面、布局、仪表盘卡片、图表和数据表已经组件化，适合继续替换品牌视觉、整理导航并连接真实数据。
六个功能路由覆盖仪表盘、表格与账户界面
| 路由页面 | 主要内容 | 二次开发方向 |
|---|---|---|
| 主仪表盘 | 指标卡片、支出趋势、周收入、流量、饼图、任务与日历 | 接入经营指标、待办和统计接口 |
| NFT 市场 | 商品卡片、收藏、创作者排行和历史记录 | 可改造成商品、内容或数字资产列表 |
| 数据表 | 开发进度、勾选、字段与复杂状态四类表格 | 连接查询、分页、筛选和编辑接口 |
| 个人资料 | 封面、头像、简介、项目与存储信息 | 接入用户资料读取和保存 |
| 登录 | 邮箱、密码、记住登录和第三方登录外观 | 补充表单校验、认证和会话处理 |
| RTL 后台 | 从右至左排版的仪表盘与导航 | 用于阿拉伯语等 RTL 语言项目 |
源码还包含 / 与 /admin 两个重定向页，都会进入 /admin/default。因此更准确的描述是六个可浏览的功能路由加两个跳转入口，而不是八个独立业务页面。各页面使用同一套侧边栏、顶部导航和卡片语言，改成 SaaS 控制台、数据中台、内容管理或内部运营后台时，视觉一致性较容易保留。
仪表盘图表与数据表具备基础前端交互
主仪表盘提供收入、支出、销售、余额、任务和项目等六组指标卡片，并组合折线图、柱状图、饼图、日流量、任务清单和月历。图表由 ApexCharts 与 React ApexCharts 渲染，日历使用 React Calendar；这些组件适合替换为接口返回的数据，但包内数值、日期和人物信息均为静态演示内容。
数据表基于 TanStack React Table，多个表格已经接入表头点击排序，勾选表还展示选择状态。顶部通知、信息和头像菜单可以展开，侧边栏在小屏幕下可切换，明暗主题按钮会增删页面的 dark 类。当前代码没有保存主题偏好的逻辑，刷新后是否继续使用上一次主题取决于你后续加入的本地存储或用户设置。
Next.js 15 工程采用 App Router 与 Tailwind 响应式布局
页面位于 src/app，按后台、认证和 RTL 三组目录组织，说明项目采用 Next.js App Router。Tailwind 配置启用了 class 模式暗色主题，并通过 md、lg、xl 等断点调整卡片列数、导航宽度和内容布局。桌面端可展示高密度数据看板，小屏幕下会将多列卡片收缩为单列或双列，并把侧边栏改为可展开形式。
next.config.js 支持通过 NEXT_PUBLIC_BASE_PATH 同时设置 basePath 与 assetPrefix，便于部署到子目录；图片优化被设置为 unoptimized，更接近静态托管场景。项目还包含 Framer Motion、Chakra UI 的部分交互工具、Tailwind RTL 插件和本地 DM Sans 字体，可在不更换整体技术栈的情况下继续扩展弹窗、动画与双向排版。
登录、搜索和业务数据仍需自行接入
登录页虽然展示邮箱、密码、记住登录和第三方登录入口，但源码中没有表单提交、接口请求或认证回调；顶部搜索框也只有输入框外观，没有绑定筛选或站内检索逻辑。通知内容、个人菜单、下载按钮和部分链接同样用于界面演示，不能视为已经完成的业务功能。
在生产项目中，需要补充服务端身份验证、会话和权限控制，对表单输入执行前后端校验，并为图表、表格、用户资料、通知和搜索接入真实数据源。还应增加加载、空数据、请求失败、无权限和会话过期状态。若用于管理敏感业务，仅在前端隐藏菜单并不能构成访问控制，接口与服务端路由仍要独立校验权限。
运行、构建与改造时需要注意什么
- 进入项目目录后执行
npm install安装依赖，再用npm run dev启动开发环境。 - 先替换 Logo、头像、字体、主色和演示文案，再按实际产品删除 NFT、RTL 或其他不需要的路由。
- 将仪表盘静态数组和表格样例替换为接口数据，同时补充筛选、分页、编辑与错误处理。
- 为登录和用户资料页接入认证服务，服务端同步实施角色、资源和操作权限校验。
- 部署到子目录时设置
NEXT_PUBLIC_BASE_PATH，并检查静态资源路径、路由跳转和刷新行为。 - 生产发布前执行
npm run build，根据构建结果处理 React RC 依赖兼容、类型和浏览器问题。
源码采用 MIT License，许可证文件要求在软件副本或重要代码部分中保留版权声明和许可文本。本文依据下载包中的源码、配置与许可证说明项目结构，没有声称已完成依赖安装、生产构建、真实接口联调或跨浏览器兼容测试。
暂无评论内容