Horizon 适合用来搭运营看板和内部数据后台：统计卡片先给出关键数字，图表展示趋势，表格再展开具体记录。下载包是一套 Next.js 前端工程，提供主仪表盘、数据表、个人资料、登录、NFT 市场和 RTL 后台；真实数据、账户认证与业务接口需要另行开发。
先让看板回答一个明确的业务问题
首页已经组合收入、支出、销售、余额、任务与项目指标，以及折线图、柱状图、饼图、流量、月历和待办。做运营后台时，可以从这些组件中挑出需要的内容，但要先确定数字的时间范围与业务口径。例如本月销售额与近七天趋势可以并排展示，只要各自标注清楚；演示数字本身不能作为计算依据。
现有路由可以按实际业务取舍：
- 主仪表盘：指标卡片、支出趋势、周收入、流量、饼图、任务与日历；接入经营指标、待办和统计接口。
- NFT 市场：商品卡片、收藏、创作者排行和历史记录；可改造成商品、内容或数字资产列表。
- 数据表：开发进度、勾选、字段与复杂状态四类表格；连接查询、分页、筛选和编辑接口。
- 个人资料：封面、头像、简介、项目与存储信息；接入用户资料读取和保存。
- 登录：邮箱、密码、记住登录和第三方登录外观；补充表单校验、认证和会话处理。
- RTL 后台：从右至左排版的仪表盘与导航；用于阿拉伯语等 RTL 语言项目。
六个功能路由之外，/ 和 /admin 都重定向到 /admin/default。NFT 市场页可以作为商品或内容卡片的布局参考，不做数字资产业务时可以删掉；RTL 是从右到左的排版入口，也不代表已经完成语言翻译。侧栏、顶部导航和卡片共用一套样式，收缩页面范围后仍能保留整体视觉。
替换数据时，从这些文件定位
工程使用 Next.js App Router，src/app 按后台、认证和 RTL 组织。菜单、卡片、图表与表格的数据入口如下：
| 文件或目录 | 修改内容 |
|---|---|
src/routes.tsx | 导航名称、布局前缀、路径与图标；页面目录位于 src/app，修改入口时两处要一致 |
src/app/admin/default/page.tsx | 主仪表盘的卡片数字与组件组合 |
src/variables/charts.ts | 多组图表的数据数组与配置 |
src/variables/data-tables | 数据表的样例记录 |
图表单位、横轴和表格状态一起核对
图表的数据数组与横轴标签需要对应。把金额改成人数后，单位、提示框和标题也要一起调整，不能只换一组数字。
数据表使用 TanStack React Table，多个表格已经接入表头排序，勾选表也展示选择状态。排序作用于传入组件的数据；要查询完整业务记录，或实现服务端分页、筛选与编辑，还需要接入接口。不同状态的样例可以用于参考颜色和标签，状态之间怎样流转则由项目业务确定。
主题与菜单能操作，偏好保存还没接上
Tailwind 用断点调整卡片列数与导航，窄屏侧栏可切换，通知、信息和头像菜单能展开。主题按钮通过增删页面的 dark 类切换明暗样式，当前没有保存偏好的逻辑。希望刷新后继续使用所选主题时，需要加入本地存储或用户设置。
工程还包含 ApexCharts、React Calendar、Framer Motion、部分 Chakra UI 交互工具、Tailwind RTL 插件与本地 DM Sans 字体。图表、日历和菜单已经有各自的组件位置，后续扩展时可以沿用它们；默认内容中的人物、日期、通知和统计值仍是演示数据。
启动、部署与业务接口
随包 package.json 的项目版本是 3.0.0，依赖声明包括 Next.js ^15.1.4、React ^19.0.0-rc.1 与 Tailwind CSS ^3.3.3。开发与发布可按随包脚本操作：
- 开发时使用
npm run dev。 - 准备发布时执行
npm run build，生成构建产物。 - 构建完成后用
npm run start启动。
具体安装版本取决于依赖解析与锁文件，目标环境的安装、兼容性和构建结果尚未实测。
next.config.js 用 NEXT_PUBLIC_BASE_PATH 设置 basePath 和 assetPrefix，部署到子目录时需要检查路径。图片配置为 unoptimized，只是关闭图片优化，不能据此判断工程已经能够直接静态导出。部署方式仍应结合构建产物与 Next.js 配置确认。
登录、搜索与错误反馈要接成流程
登录页有邮箱、密码、记住登录与第三方登录外观，但没有提交、认证请求或回调；顶部搜索也没有绑定查询逻辑。把业务数据接进看板时，需要同时安排身份验证、会话与服务端权限，以及加载、空结果、请求失败和会话过期反馈。否则页面看起来有数据，访客却无法判断记录是否完整、操作是否成功。
个人资料、通知和下载入口也需要对应真实服务。涉及敏感数据时，服务端与接口应校验访问权限，前端隐藏菜单只负责界面呈现。适合从这套模板复用的是信息布局与组件组织，具体业务规则仍需开发。
暂无评论内容